移动端自适应处理页面布局

处理页面大概会有若干种方案:

  1. 第一种就是使用bootstrap;

  2. 自己使用自适应单位常用的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,但是第一个问题没有解决;

  3. 所以放弃使用flexble.js,选用他人使用封装好的rem;是 以750px宽度的设计稿,可以适应大部分手机;但有一点缺陷是早期vivo x7 的一类安卓手机原生浏览器或webview中会出现视觉视口小于布局视口的情况;
    最后综合2,3两个,修改js源码依旧没有调好,最后想到的是宽度设置用百分比,高度用3设置的方案rem;

    希望大神有全部适应的方案给个demo,谢谢;

posted @ 2018-03-27 18:10  Panax  阅读(374)  评论(0编辑  收藏  举报