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、38四、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 ]