html5移动端适配,html5自适应屏幕代码

　　Html5曾经是最火的技术，移动端因为html5技术的加入变得更加灵活。大家都喜欢“写一次，多跑一次”，但既然扎克伯格今年承认了自己在html5上的失策，我们也应该清醒地看到，html5作为一项新兴技术，还是有很多不完善的地方，比如html5的效率，足以让很多程序员无法吐槽，让消费者无法忍受。但是，不可否认的是，html5给我们带来了不错的web技术。是未来发展的趋势，不是终点。我们能做的就是改进它，写出更好更高效的代码。

　　好了，说了这么多废话，现在说正题。安卓适配是安卓程序员最头疼的问题。每个人都尽了最大努力来解决这个问题，但我们可以在html5这里更好地解决这个问题。移动浏览器将页面放置在虚拟的“视口”中。通常这个虚拟的“视口”比屏幕要宽，这样你就不用把每个网页都挤进一个很小的窗口里(这样会破坏没有针对手机浏览器优化的网页的布局)。用户可以通过平移和缩放来查看网页的不同部分。常见的视口布局有：meta name= viewport content= width=device-width，user-scalable=no/

　　具体意思是：

　　宽度：控制视口的大小，可以将其指定为一个值。如果是600，或者是一个特殊的值，比如device-width就是设备的宽度(单位是100%缩放时CSS的像素)，默认的虚拟窗口是980像素宽(目前大多数网站的标准宽度)，然后按照一定的比例(3: 1或者2: 1)进行缩放。

　　高度：对应于宽度，并指定高度。

　　目标密度dpi:屏幕每英寸的像素由屏幕分辨率决定，通常定义为每英寸的点数(dpi)。Android支持三种屏幕每英寸像素：低每英寸像素、中每英寸像素和高每英寸像素。每英寸像素低的屏幕每英寸像素少，而每英寸像素高的屏幕每英寸像素多。Android浏览器和WebView默认屏幕是每英寸像素。

　　以下是target-densitydpi属性的值范围

　　设备-dpi-使用设备的原始dpi作为目标dpi。不会发生默认缩放。

　　高dpi-使用hdpi作为目标dpi。中像素每英寸和低像素每英寸设备相应减少。

　　中-dpi-使用mdpi作为目标dpi。每英寸像素数的设备相应放大，每英寸像素数的设备相应减小。这是默认的目标密度。

　　低dpi-使用mdpi作为目标dpi。中像素每英寸和高像素每英寸设备相应放大。

　　value指定特定的dpi值作为目标dpi。该值必须在70400的范围内。

　　meta name= viewport content= target-density dpi=device-dpi /

　　meta name= viewport content= target-density dpi=high-dpi /

　　meta name= viewport content= target-density dpi=medium-dpi /

　　meta name= viewport content= target-density dpi=low-dpi /

　　meta name= viewport content= target-density dpi=200 /

　　为了防止Android浏览器和WebView根据不同屏幕的每英寸像素缩放您的页面，您可以将viewport的target-densitydpi设置为device-dpi。这样做时，页面不会缩放。相反，页面将根据当前屏幕每英寸的像素显示。在这种情况下，您还需要定义viewport的宽度来匹配设备的宽度，以便您的页面能够适应屏幕。

　　初始比例：初始比例，即页面第一次加载时的比例。

　　Maximum-scale:允许用户缩放的最大比例，范围从0到10.0。

　　Minimum-scale:允许用户缩放的最小比例，范围从0到10.0。

　　用户可缩放：用户是否可以手动缩放，值可以是：是，true允许用户缩放；不可以，不允许虚假用户缩放。如果设置为否，最小比例和最大比例都将被忽略，因为根本不可能缩放。

　　所有的缩放值都必须在0.0110的范围之内。

　　将这些属性设置之后放入html5的自指的属性中，即可对手机屏幕进行适应，例：复制代码代码如下：

　　[mw_shl_code=xhtml，true]meta name=viewport

　　内容=

　　高度=[像素值设备高度],

　　宽度=[像素值设备宽度],

　　初始比例=浮点值，

　　最小比例=浮点值，

　　最大规模=浮点值，

　　用户可伸缩=[是否],

　　目标密度dpi=[dpi值设备dpi 高dpi 中dpi 低dpi]

　　/[/mw_shl_code]

　　下面是两个实际使用的例子：

　　（设置屏幕宽度为设备宽度，禁止用户手动调整缩放)复制代码代码如下：

　　meta name= viewport content= width=device-width，user-scalable=no /

　　（设置屏幕密度为高频，中频，低频自动缩放，禁止用户手动调整缩放)复制代码代码如下：

　　meta name= viewport content= width=device-width，target-densitydpi=high-dpi，initial-scale=1.0，minimum-scale=1.0，maximum-scale=1.0，user-scalable=no/

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。