viewport 最佳实践

移动端开发有各类适配方案，有淘宝的，网易的...,但各类方案都会有各自的问题和开发难度；

今天我的在手机端实测能够使用的最佳配置产生了，页面UI设计和前端开发彻底一致，开发效率和pc时代一致；无需rem,lesss，sass,无需关注vw,vh的兼容，只要知道px就能搞定全部适配，能够随意使用各类position定位。

下面是viewport的最佳配置实例：

• 能够根据设计稿的尺寸进行宽度调整，下例为750

<meta id="vp" name="viewport" content="width=750,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">复制代码

以上的代码，已经能够使得页面在任何移动端正常的工做了，只是因为是适配750的，所以在iphone6下是最佳体验，其余尺寸屏幕会出现滚动条或者留白。

去除滚动条或者留白

• 只需附加2行JS代码就能够解决这个问题了

var w1=window.innerWidth,scale=w1/750*0.5;
document.getElementById('vp').content='width=750,initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no';复制代码

好了，如今能够愉快的把移动端网页开当作宽度750的pc页面来开发了。

通过测试，安卓和iOS下工做正常，微信和普通浏览器也OK

没有任何附加的学习成本，立立刻手你的移动项目吧！