1. 程式人生 > >移動端自適應處理頁面布局

移動端自適應處理頁面布局

dem 全部 但是 希望 去掉 常用 boot div 謝謝

處理頁面大概會有若幹種方案:

  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,謝謝;

移動端自適應處理頁面布局