移动web自适应性详解

一般说到移动端web自适应方法时，只要在html文档头部加上一个meta标签<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no'>即可。但各个参数都是什么意思，如何理解，以做到举一反三。

一、视口viewport理解：

1、视口的类型：视口分为布局视口、可视视口和理想视口，meta标签中的viewport视口为布局视口。

布局视口（layout viewport）：一般说的视口为布局视口。meta标签中的viewport即为布局视口。布局视口大小是不变的，对应的是css像素；

可视视口(visual viewprot)：浏览器的可视区域；

理想视口（ideal viewport）：非视网膜屏幕中，网页不缩放的情况下，布局视口和理想视口大小都等于可视视口大小。不同设备理想视口大小可能不同。

2、在pc和移动端各视口的表现：

pc端：非视网膜屏、网页缩放比例100%情况下，理想视口大小为浏览器窗口即可视视口大小。当网页缩放时，可视视口会随之缩放。网页放大，则可视视口变小（chrome中document.documentElement.clientWidth/clientHeight会减小），一个css像素对应多个物理像素，在可视视口中能展示的布局会减少。

移动端：meta标签各属性参数的含义：

viewport:指布局视口。默认的布局视口比较大（一般为相应pc浏览器的视口大小）。

“width=device-width”：布局视口宽度等于可视视口宽度，等于理想视口宽度。100%的页面布局会满屏显示。

“initial-scale=1”：默认缩放比例为1即不缩放，也能起到width=device-width的满屏显示效果。当设置initial-scale=2时，即放大2倍，可视视口缩小到1/2（当理想视口为320px时，可视视口变为160px），故在可视视口中能展示的页面布局区域会相应减少到1/2，导致1/2页面不可见。

“user-scalable=0”：不允许用户缩放页面。当不设置该属性时，用户可以缩放页面。如放大页面之后，刷新页面，页面仍会停留在当前放大状态，不会回到无缩放的初始状态。

建议width=device-width和initial-scale=1结合使用，一避免safari/winphone下的小bug。当设置的width和initial-scale冲突时，一般以数值大的为准。比如width=400px,initial-scale=1,当理想视口为320px时（此时width指定为400px，initial-scale=1计算值为320px）,布局视口为400px；当理想视口为414px时（此时width指定为400px，initial-scale=1计算值为414px），布局视口为414px。

二、meta标签设置网页各终端自适应方法

1、标准通用方法

<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no'>

优点：兼容性好，各移动端浏览器都支持。

缺点：如果设计稿为1套（如640px设计稿），用px像素为主单位开发页面的话，在高分辨率如iphone6 plus上，文字会略显小。可以用rem为单位，在各分辨率手机中按相应比例缩放，来达到整体视觉良好的适配。

2、简单省事方法

<meta name="viewport"content="width=640,target-densitydpi=device-dpi,user-scalable=no"/>

原理：因为现在的手机真实分辨率（可视视口）都要小于640px，iphone6 plus为414px。故以640px宽的设计稿，以640px为布局视口，设计稿和布局比例为1:1，将该页面布局压缩到可视视口中显示。

优点：此方法的优点是布局大小都一样，为640px，各手机分辨率不同，故压缩比例不同，大分辨率布局显示比较大，小分辨率布局显示则较小，体验好。如在320px(iphone5/5s)中，压缩比例是2:1，在414px(iphone6 plus)中压缩比例约为1.5。

缺点：因一套设计稿，在320px分辨率手机上压缩比为2，若设备像素率也为2的话，这种状况下，页面清晰度好且不会造成浪费。但是对应分辨率大于320px的设备中，压缩包要小于2，而设备像素率大多为2或3，所以页面图片会不太清晰。