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

手机，当前页面的窗口宽度设置

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

说明：

①user-scalable=0设置用户不可以进行缩放

②如果width 和 initial-scale=1同时出现且二者出现冲突时 ，浏览器会取它们两个中较大的那个值【补充：在uc9浏览器中，当initial-scale=1时，无论width属性的值为多少，此时viewport的宽度永远都是ideal viewport的宽度】
 例如： 当width=400，ideal viewport的宽度为320时，取的是400；当width=400， ideal viewport的宽度为480时，取的是ideal viewport的宽度。

③（width=device-width与 initial-scale=1.0达到同一个效果）

•   有width=device-width, initial-scale=1.0,时则：【ideal viewport】

 

（设备宽度为414px，chrome浏览器）                   （设备宽度为375px，chrome浏览器）

      手机显示ideal viewport宽度（与设备的宽度有关，不同设备拥有有不同的ideal viewport。 【移动设备默认的宽度值320px、360px、384px、400px 等】，补充：所有的iphone的ideal viewport宽度都是320px，无论它的屏幕宽度是320还是640）

故：

当手机设备的宽度为320时同时设置了width=device-width，网页内容在手机上显示的效果将于在pc端浏览器窗口宽度为320时显示效果一致

•   无width=device-width, initial-scale=1.0,时则：【layout viewport】

  （设备宽度为320px，chrome浏览器）               （设备宽度为480px，chrome浏览器）

       手机显示layout viewport宽度（与设备宽度无关，不同设备，浏览器默认情况下把viewport设为同一个较宽的值, 【移动设备上浏览器默认的宽度值为800px，980px，1024px等】）

chrome浏览器中设备宽度设置为1000px,弹出值为1000px

例子：

当手机的layout viewport宽度为980时且设备宽度小于980未设置width=device-width，网页内容在手机上显示的效果将于在pc端浏览器窗口宽度为980时显示效果一致