移动端开发viewport深入理解（转）

一、viewport的概念

 

　　移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，就是浏览器上用来显示网页的那部分区域，但viewport不局限于浏览器可视区域

的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。

 

　　在默认情况下，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（该值由设备自己屏幕大小决定），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可是区域的宽度是比这个默认的viewport的宽度要小的。

 

二、css中的1px并不等于设备的1px

 

　　在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个斤斤计较，但在移动设备上，必须弄明白这点。

 

　　在早先的移动设备中，屏幕像素密度都比较低，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素越来越高，从iphone4开始，分辨率提高了，但屏幕尺寸没变，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。

 

　　还有一个因素也会引起css中px的变化，那就是用户缩放，例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。

 

　　window对象中有一个devicePixelRatio属性，官方定义为：设备物理像素和设备独立像素的比例。devicePixelRatio = 物理像素 / 设备独立像素

 

三、关于viewport的三个理论

 

     因为分辨率增大，但屏幕尺寸没有变大多少，必须让css中的1px代表更多的物理像素，才能让1px的东西在屏幕上的大小与那些低分辨率的设备差不多，不然就会因为太小而看不清。所以在1080x1920这样的设备上，在默认情况下，也许你只要把一个div的宽度设为300多px，就是满屏的宽度了。回到正题上来，如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。

 

　　PPK把这个浏览器默认的viewport叫做 layout viewport。这个宽度可以通过document.documentElement.clientWidth来获取。

 

     然而，layout viewport 的宽度是大于浏览器可视区域宽度的，所以我们还需要一个viewport 来代表浏览器的可视区域的大小，PPK把这个viewport 叫做 visual viewport。这个viewport可以通过window.innerWidth 来获取。但在 Oprea mini 和 UC 8 中无法正确获取。

 

　　

 

 

     现在已经有两个viewportl了：layout viewport 和 visual viewport。但浏览器觉得还不够，因为现在越来越多的网站都会为移动设备进行单独的设计，所以必须还要有一个能完美适配移动设备的viewport。所谓的完美适配指的是，首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；第二，显示的文字的大小是否合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段14px的文字无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。当然，不只是文字，其他元素，像图片什么的也是这个道理。PPK把这个viewport叫做 ideal viewport，也就是第三个viewport——移动设备的理想viewport。

 

     ideal viewport并没有一个固定的尺寸，不同的设备拥有不同的ideal viewport。所有的iphone的ideal viewport宽度都是320px，无论它的屏幕宽度是320还是640，也就是说，在iphone中，css中的320px就代表iphone屏幕的宽度。

 

     但是安卓设备就比较复杂了，有320px，360px,384px等等。

 

 　　　　

四、利用meta标签对viewport进行控制

 

     移动设备默认的viewport是 layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，我们需要的是 ideal viewport。

那么怎么才能获取  ideal viewport 呢？ 这时候轮到meta标签出场了。

 

　　我们在开发移动设备网站时，最常见的一个动作就是把下面这个东西复制到我们的head标签中：

 

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

 

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。

 

这个name 为 viewport 的 meta的标签到底有哪些东西呢？又都有什么作用呢？

 

meta viewport标签首先是苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。

 

在苹果的规范中，meta viewport有6个属性

width	设置layout viewport的宽度为一个正整数，或字符串"width-device"
intial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置Layou viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable	是否允许用户进行缩放，值为"no"或"yes"，"no"代表不允许，"yes"代表允许

 

　　多个属性同时使用逗号隔开就行。

 

　　此外，安卓还支持 target-densitydpi 这个私有属性，它表示目标设备的等级密度，作用是决定css中的1px代表多少物理像素

 

target-densitydpi

值可为：（某个值）| high-dpi | medium-dpi | low-dpi | device-dpi

 

　　特别说明的是，当target-densitydpi=device-dpi时，css中的1px等于物理像素的1px。

　　因为这个属性只有安卓支持，并且安卓已经决定要废弃这个属性，所以这个属性我们要避免使用。

 

五、把当前的viewport宽度设置为 ideal viewport的宽度

 

     要获取ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。因为meta viewport中的width能控制layout viewport的宽度，所以我们只需要把width设为width-device这个特殊的值就行了。

 

<meta name="viewport" content="width=device-wdith">

<meta name="viewport" content="width=device-width">

 

可以看到通过width=device-width，所有浏览器都能把当前的viewport宽度变成ideal viewport的宽度，但要注意的是，在iphone和ipad上，无论是竖屏还是横屏，宽度都是竖屏时ideal viewport的宽度。

 

<meta name="viewport" content="initial-scale=1">

 

也能达到和上一句代码一样的效果，即也能把当前viewport变为 ideal viewport、

 

 

总结：在移动端开发的时候，咱们不仅要会使用meta viewport标签来使页面更好的显示在移动设备上，我们也要知道一些理论知识，不能拿来就用，理论与应用结合，相信能走的更远。

 

（图文转载自 http://www.cnblogs.com/2050/p/3877280.html 作者： 无双）