移动端开发有各种适配方案,有淘宝的,网易的...,但各种方案都会有各自的问题和开发难度;
今天个人在手机端实测可以使用的最佳配置产生了,页面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