web移动端viewport的理解

1. viewport 概念
meta viewport 标签：首先是由苹果公司在其safar浏览器中引入的，目的是解决移动设备显示网页大小的问题。viewport概念上有人提出了，visual viewport、layout viewport、ideal viewport 三个概念。

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

visual viewport:定义为移动端浏览器可视区域宽度，手机的的分辨率（物理像素）。
layout viewport:为了让移动端浏览器能够正常显示PC端的网页，浏览器供应商会为浏览器设置一个viewport值，一般为980px或其他。由于这个值大于visual viewport，所以浏览器出现一个横向的滚动条。
ideal viewport: 理论上应该等于移动设备屏幕的的分辨率即屏幕的宽度。第一代iphone的分辨率为320*480
3.5寸,ideal viewport 就取值为320。第二代iphone 手机屏幕分辨率变成480*960 3.5寸。相同尺寸的屏幕，分辨率变大，显示的字体将会变小。为了达到同样的字体字号，在相同尺寸上显示的大小一样。第二代iphone取这个idealviewport的值仍然为320。 css上面1px是对应ideal viewport 上面的1px，而手机端屏幕显示的是2px。ideal viewport一定的情况下，手机分辨率越高，css1px对于的像素就越大。ideal viewport在其他文档中称为（logic point，逻辑像素） DPR：设备物理像素和逻辑像素的对应关系，即物理像素/逻辑像素。

2.如何取得或设置ideal viewport

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

苹果规范中，meta viewport 有6个属性。
width 设置layout viewport 的宽度，为一个正数，或者width-device；
inital-scale 设置页面的初始缩放值，第一次页面加载时的缩放比例，为一个数字，可以带小数；
minimum-scale 设置用户的最小缩放值，为一个数字，可以带小数；
maximum-scale 设置用户的最大缩放值，为一个数字，可以带小数；
height 设置layout viewport 的高度，这个属性几乎不用；
user-scalable 是否允许用户进行缩放，值为“no”或“yes”，no不允许，也是允许；

不修改的情况下，移动设备启用浏览器默认的layout viewport的默认值（980px或其他）。由于现在公司都会单独开发（自适应）一套移动端网页给移动端使用。这个980px的预设值，有点不适用。所有设置width=width-device，指定layout viewport 的宽度等于当前屏幕的ideal viewport。批注：由于苹果公司为了开发方便，这里无论是横屏还是竖屏给定的都是竖屏的ideal viewport （逻辑像素）值。 js的window.width 可以读出当前ideal viewport 的值。

inital-scale:缩放的对象是以ideal viewport为基准的。当inital-scale=1时，viewport 等于ideal viewport。当物理像素是逻辑像素2倍，即dpr=2时，设置inital-scale=1/dpr=0.5，css中的1px 对应的手机屏幕显示的就为1px。

3.兼容性

由于每个移动端的ideal viewport（逻辑像素） 都不一定相同，比如iphone 6为：375，Galaxy S5 为360，所以在实现ui的图纸是需要考虑到不同的逻辑像素设备之间的差异，这就是移动端的兼容性问题。
假设UI设计图的图纸与屏幕大小为750px宽为标准，图纸上的字体型号为：24px；如果要在iphone6上现实这个字号。
iphone 6的逻辑像素为375px，设计图的屏幕宽度为750px等于2倍的375px;
方法一：head 里边定义layout view等于逻辑线索宽，初始倍数为1：

<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
css: 
     html{ font-size:12px;} /* 在手机屏幕上会显示24px*/

方法二：

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
css：
    html{ font-size:24px;}  /*在手机屏幕上会显示24px;*/

同理图纸中凡涉及到尺寸的地方，都需要做相应的适配。为了简化操作，图纸所有的尺寸都以html{font-size:24px} 为基准，用rem做单位。设配不同的手机时，只需更改根节点font-size的值，就能达到整个页面的同比例伸缩效果。

4.手机fontSize 的js设定

JS是可以实现全适配代码：

 <script>        
        (function (doc, win) {    
            var docEl = doc.documentElement,    
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',    
            recalc = function () {    
            var clientWidth = docEl.clientWidth;    
            if (!clientWidth) return;    
            docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';    
        };    
        if (!doc.addEventListener) return;    
        win.addEventListener(resizeEvt, recalc, false);    
        doc.addEventListener('DOMContentLoaded', recalc, false);    
        })(document, window);    
    </script>

5.手机特效去除

<meta name="HandheldFriendly" content="true"> <!--针对老的不认识viewport的浏览器-->
<meta name="MobileOptimized" content="width"> <!--微软老式浏览器-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes"><!--删除苹果工具栏和菜单栏-->
<meta name="apple-mobile-web-app-status-bar-style" content="black"><!--控制状态栏显示样式-->
<meta name="format-detection" content="telephone=no"><!--处理iPhone给对应的对象自动添加链接样式-->

参考：
http://www.duanliang920.com/learn/web/html5/316.html
http://www.cnblogs.com/doseoer/p/5331755.html
http://www.cnblogs.com/2050/p/3877280.html