h5 移动端开发自适应 meta name="viewport"的使用总结

　　本文系个人理解，可能有误差，仅供参考，谨慎采纳！

布局视口: 系统自带 一般大于屏幕宽度

理想宽度:  设置页面的viewport 的一个宽度，使不同的手机的布局视口宽度尽量接近可视窗口的值；

可视视口：即屏幕宽度

第一种情况：不显示地设置viewport：  若代码中网页宽度小于设备默认值 按 默认，大于设备默认则viewport的宽度变为网页的最大值。

那么width的默认为手机厂商自定义的 布局视口layout viewport  宽度有980 1024等等，如： 手机宽度为980，

　　1）如果网页的所有元素宽度都小于这个宽度如980，此时width为980，

　　2）如果页面最宽的位置超过980，那么width等于最大宽度。

补充：在ios中（安卓未测），若网页高度<=设备高度，则viewport的宽度变为网页的最大值，宽度会产生滚动条；

　　提示：不是适配手机端的页面建议不要设置viewport, 由系统自动缩放整个页面。

第二种情况：显示设置viewport  为理想宽度：即width=device-width, initial-scale=1.0  网页中需写适配代码。

　　每个移动设备浏览器中都有一个理想的宽度，这个理想的宽度是指css中的宽度，跟设备的物理宽度没有关系，在css中，这个宽度就相当于100%的所代表的那个宽度。我们可以用meta标签把viewport的宽度设为那个理想的宽度，如果不知道这个设备的理想宽度是多少，那么用device-width这个特殊值就行了，同时initial-scale=1也有把viewport的宽度设为理想宽度的作用。所以，我们可以使用

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

只有这样才能保证同样的网站在不同分辨率的设备上看起来都是一样或差不多的。

实际上，现在市面上虽然有那么多不同种类不同品牌不同分辨率的手机，但它们的理想viewport宽度归纳起来无非也就 320、360、384、400等几种，都是非常接近的，理想宽度的相近也就意味着我们针对某个设备的理想viewport而做出的网站，在其他设备上的表现也不会相差非常多甚至是表现一样的。

第三种情况： 显示设置viewport  为不理想宽度，即和理想尺寸差别很大，如 viewport的width=1000（目前理想设计稿宽度一般参考Iphone5 640I或 Iphone6 750）;

　　1）如果网页不需要做适配： 必须viewport的宽度>代码中网页宽度，否则会因为宽度数值小而网页宽度大导致页面出现滚动条。

　　　        A.网页宽度===viewport的宽度 则 满屏，比如，你拿个3.5寸-320 * 480的iphone3 gs、3.5寸-640 * 960的iphone4或者9.7寸-1024*768的ipad2，虽然设备的分辨率不同,物理尺寸也不同，但你可以通过设置viewport让它们在浏览器里有相同的分辨率。比如说，你的网站是800px宽，你可以通过设置viewport的width=800，来让你的网站在这三个不同的设备上都刚好满屏显示你的网站；

　　  　      B. 网页宽度>viewport的宽度，则会出现滚动条；

　　　        C. 网页宽度<viewport的宽度，则会和PC端窗口变大一样的效果。

　　2）如果网页做适配：如果非要在适配(此时适配无意义，只是假如非要这么操作。。。。有bing么？)情况下设置固定布局视口宽度，则网页宽度等于布局视口宽度，这样虽然不同手机都会满屏，但是显示会出现不同手机不同效果（看起来是viewport理想宽度下的整体放大或缩小），建议用第二种方式。

哦。。。 情况有点多，

但是作为一个细致的码农，

总之各种情况都要考虑到吧。。。

仅供参考。。。

----------------------------------------------------

如有错误，欢迎评论指正、共同提高。[握手]

欢迎转载，转载请注明：转载自[ http://www.cnblogs.com/juneling ]