移动端自适应处理--viewport

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
http://www.w3schools.com/css/css_rwd_viewport.asp

The viewport is the user's visible area of a web page.
A typical mobile-optimized site contains something like the following:

The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)
The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.

tips

1.Do NOT use large fixed width elements
For example, if an image is displayed at a width wider than the viewport it can cause the viewport to scroll horizontally. Remember to adjust this content to fit within the width of the viewport.

---

在使用中发现一个bug：

viewport的width即使设置了固定值 ,但是设置了initial-scale这个属性后，会自动把width变成device-width(即使width不设置，也会默认设置width=device-width).

试验如下（chrome）中调试（页面内容按640宽度设置）：
1.width=640,initial-scale=1 不正常

1BA9667E-A0D7-43FE-90CD-E3C3758959BA.png

021553DB-7603-4231-8953-9CF4C15F563E.png

2.单独 width=640 正常

407B4362-C177-425F-B40C-3E0857D07461.png

943D6C77-18E1-46BC-B6D9-70CAB740AD98.png

3.单独 initial-scale=设备宽度／640 正常(写不写width=device-width都一样)

189C849E-EEDD-4B16-9936-A013AF218152.png

4.同时设置 width=640 和 initial-scale=设备宽度／640 正常

FFC13C22-FF13-4EF6-83DF-6B794E6E4C74.png

结论：按照设想，视口（viewport）宽度设置640 ，页面缩放是1，根据定义应该是正常的。但是试验后发现结果是另外一种情形。根据试验结果猜想应该是initial-scale影响了width的值(变为device-width)