手机viewport:讨论缩放比之前的知识准备

【手机viewport:讨论缩放比之前的知识准备】

在研究缩放比之前，有必要先了解清楚一些概念和viewport属性及其用法， 如target-densitydpi，width，像素密度，CSS Pixels。

1.target-densitydpi：

像素密度，在一英寸中有多少个像素，单位dpi，在CSS2.1描述为可以用于覆盖CSS默认的像素密度(160dpi)的特性，[70, 400]，low-dpi(120)，medium-dpi(160)，high-dpi(240)，device-dpi(设备像素密度，按IP4S为例，326)，target-densitydpi默认值就是160dpi。虽然已被W3C移除，但有必要知道不使用它的时候，浏览器是按照device-dpi来作为像素密度，即设备的最高分辨率来显示页面内容。

为何要移除target-densitydpi：W3C将其列为“At risk”(危险)，主要是因为Android与IOS原生浏览器未有一致的实现，其次我觉得它在对于精确缩放页面内容意义不大，修改target-densitydpi等同于你在台式机的系统中修改显示器的分辨率，这些分辨率是一个区间，一般不会连续，如(1440*900，1400*1050，1366*768...)，如果我要在显示器中横向100%的宽度全部用于显示一个1000px的页面，我要将横向分辨率调到1000，但实际上无这样的可选分辨率给我选的，只能近似选择(1024*768)，这个显然不是精确缩放，而low-dpi，medium-dpi，high-dpi这些像素密度就相当于这些可选的分辨率，只是这些值是基于1英寸，即在一英寸中以多少个像素来显示内容，而台式机显示器的分辨率是基于显示器横向长度，即显示器横屏以几多个像素来显示内容，由于这个像素密度理论上只能控制一英寸中分布多少像素，而不是控制掌上设备横向宽度分布多少像素，所以意义不大，尽管W3C之前将其设计在[70,400]可连续。理论上姑且如是，实际上在手机上测试，真正起到缩放作用的是缩放比属性initial-scale，minimum-scale，maximum-scale.

2.viewport的width属性：

在规范中这个属性以CSS pixels作为单位，它是负责控制浏览器窗体的宽度，当数值少于或者等于device-width时不会出现滚动条，当值大于device-width时(值不等于页面设计稿的宽度，单位CSS Pixels)会出现滚动条，页面内容会居中显示，当值大于device-width时(值等于页面设计稿的宽度，单位CSS Pixels)不会出现滚动条，效果如同取值为“device-width”，业界通常会设置为“device-width”，从语意上考虑，我更倾向于使用“device-width”。在实际应用中，是极少用到height属性的，因为做页面一般不限高度的，高度超出浏览器视口的时候，浏览器会出现滚动条，所以无需关注height属性。

3.像素密度：

表示一个标准的CSS Pixels包含多少个物理像素，通常可以通过window.devicePixelRatio来获得。

4.CSS Pixels:

表示标准的CSS像素，这个概念很容易跟分辨率中提到的物理像素概念混淆，按IP4S为例，分辨率为640*960，其意思是竖屏下的屏幕宽度含有640个像素，这里指的像素为物理像素，按照IP4S的像素密度为2，可以推算出其宽度为640/2 = 320(CSS Pixels)，而CSS Pixels与物理像素的区别在于，前者是可以通过除以96得出绝对宽度英寸，而后者在没有提供像素密度前提下无法推算出物理宽度，所以CSS Pixels可以和cm，in等归于一类。

在了解完这些之后，我们知道要做好viewport余下的设置，只需要专注于缩放比，只要将initial-scale，minimum-scale，maximum-scale都设置为缩放比就可以了。

本文来源 我爱IT技术网 http://www.52ij.com/jishu/11997.html 转载请保留链接。