移动端自适应处理页面布局
处理页面大概会有若干种方案:
-
第一种就是使用bootstrap;
-
自己使用自适应单位常用的rem,em ,及别人封装好的插件flexble.js;
在使用flexble.js;时发现两个问题,高度没有很好的展现,有时会比设计稿低,会造成页面扁平不好看,第二种就是容易造成双手指扩大,这个可以在flexble.js 进行配置,在项目index中去掉meta设置,在flexble.js加上nitial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, shrink-to-fit=no,但是第一个问题没有解决; -
所以放弃使用flexble.js,选用他人使用封装好的rem;是 以750px宽度的设计稿,可以适应大部分手机;但有一点缺陷是早期vivo x7 的一类安卓手机原生浏览器或webview中会出现视觉视口小于布局视口的情况;
最后综合2,3两个,修改js源码依旧没有调好,最后想到的是宽度设置用百分比,高度用3设置的方案rem;希望大神有全部适应的方案给个demo,谢谢;
作者:人参,每篇随笔皆原创(除非注明原作者的随笔),欢迎指正!