viewport
viewport就是视口，它是页面的显示大小，区别于浏览器窗口的大小，它可能比浏览器窗口大。
1px
在css中我们一般使用px作为单位，但是css的1px和实际的物理像素点的1px是有区别的，iphone4以前分辨率是320*480，在苹果推出retina屏之后，分辨率变成了640*960，由于屏幕大小没变化，物理像素却增加了一倍，导致这个时候一个css像素是等于两个物理像素的。
window对象有一个devicePixelRatio属性，俗称dpr，它是设备物理像素和css像素的比例，所以640*960的时候，dpr为2。
iphone6设备宽高为375*667，dpr为2，所以物理像素就应该是750*1334.
视口宽度
不同的设备有不同的视口宽度，但是所有的iphone的理想视口宽度都是320px，无论它的屏幕宽度是320还是640，就是说iphone里面，320px就代表理想中iphone屏幕的宽度，这样可以让同一个网站在不同分辨率下的浏览效果差不多。安卓设备不同，很很多种视口宽度，但常见的基本也就是320，360，384等几种。
通过设置<meta name="viewport" content="width=device-width">来让视口获得理想宽度。同样，设置<meta name="viewport" content="initial-scale=1">也可以让视口获得理想宽度，因为这个缩放就是根据理想宽度来缩放的。当两个都写的时候取大的。
淘宝的解决方案
引入淘宝的flexible的文件，最好在html的顶部，这个js会自动帮我们在html标签上生成data-dpr和font-size，然后根据dpr的大小，动态设置viewport的缩放。font-size为移动设备的物理像素 / 10，一般设置rem先写死一个常量，比如设计稿是750，常量就是75，这是为，设置rem通过实际宽度 / 75，设置字体一般通过data-dpr数值进行缩放。图片通过css的属性选择器[data-dpr]进行选择大图。
flexible的data-dpr处理方案是安卓统一dpr为1，苹果根据屏幕大小来设置dpr。
网易解决方案
比如设计稿是640，定rem为100px，即1rem=100px，这个时候计算font-size = deviceWidth / 6.4，然后设置<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
当物理宽度过大
var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
当deviceWidth大于640时，物理分辨率要大于1280(dpr:2)，这个时候应该去访问pc网站了。可以给body设置一个6.4rem，margin：0 auto；居中显示。
网友评论