今天小编跟大家讲解下有关html5在移动端的屏幕适应问题示例探讨 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关html5在移动端的屏幕适应问题示例探讨 的相关资料，希望小伙伴们看了有所帮助。
Html5 曾经是最最炙手可热的技术 移动端也因为html5技术的加入变得更加变通一些 人人都喜欢“Write once run more” 但在今年扎克伯格承认在html5上的失策以来 我们也应该清醒的认识到html5作为一种新兴技术 还有许多不完善的地方 比如html5 的效率问题 这足以让众多程序员们无力吐槽 消费者们也会无法忍受。但不可否认的是html5给我们带来给好的web技术 它是未来发展的趋势 并且不是 终点 我们能够做的就是更加努力的完善它 写出更好 更有效率的代码。 好了 说了这么多废话 现在开始进入主题 android的适配问题是最让android程序员头疼的问题 大家为此也是八仙过海 各显神通啊 但在 html5这里我们可以更好的解决这项问题。手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中 通常这个虚拟的“窗口” （viewport）比屏幕宽 这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局） 用户可以通过平移和缩放来看网 页的不同部分。常用的viewport布局为：<meta name="viewport" content="width=device-width,user-scalable=no" /> 具体的含义是： width：控制 viewport 的大小 可以指定的一个值 如果 600 或者特殊的值 如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素） 默认的虚拟窗口为980像素宽（目前大部分网站的标准宽度） 然后按一定的比例（3：1或2：1）进行缩放。 height：和 width 相对应 指定高度。 target- densitydpi：一个屏幕像素密度是由屏幕分辨率决定的 通常定义为每英寸点的数量（dpi）。Android支持三种屏幕像素密度：低像素密度 中像素密度 高像素密度。一个低像素密度的屏幕每英寸上的像素点更少 而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。 下面是 target-densitydpi 属性的 取值范围 device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。 high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。 medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大 像素密度设备相应缩小。 这是默认的target density. low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。 <value> – 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。 <meta name="viewport" content="target-densitydpi=device-dpi" /> <meta name="viewport" content="target-densitydpi=high-dpi" /> <meta name="viewport" content="target-densitydpi=medium-dpi" /> <meta name="viewport" content="target-densitydpi=low-dpi" /> <meta name="viewport" content="target-densitydpi=200" /> 为了防止Android Browser和WebView 根据不同屏幕的像素密度对你的页面进行缩放 你可以将viewport的target-densitydpi 设置为 device-dpi。当你这么做了 页面将不会缩放。相反 页面会根据当前屏幕的像素密度进行展示。在这种情形下 你还需要将viewport的 width定义为与设备的width匹配 这样你的页面就可以和屏幕相适应。 initial-scale：初始缩放比例 也即是当页面第一次 load 的时候缩放比例。 maximum-scale：允许用户缩放到的最大比例 范围从0到10.0。 minimum-scale：允许用户缩放到的最小比例 范围从0到10.0。 user-scalable：用户是否可以手动缩放 值可以是：①yes、 true允许用户缩放；②no、false不允许用户缩放 如果你将其设置为no 那么minimum-scale 和 maximum-scale都将被忽略 因为根本不可能缩放。 所有的缩放值都必须在0.01–10的范围之内。 将这些属性设置之后放入html5 的meta属性中 即可对手机屏幕进行适应 例： 复制代码代码如下: [mw_shl_code=xhtml,true]<meta name="viewport"content="height = [pixel_value | device-height] , width = [pixel_value | device-width ] , initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value , user-scalable = [yes | no] , target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-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"/>来源：爱蒂网
