移動前端兼容操做總結

移動端Web頁面，即常說的H5頁面、手機頁面、webview頁面等。

手機設備屏幕尺寸不一，作移動端的Web頁面，須要考慮在安卓/IOS的各類尺寸設備上的兼容，這裏總結的是針對移動端設備的頁面，設計與前端實現怎樣作能更好地適配不一樣屏幕寬度的移動設備。

適配的目標

引用一文章的描述：

在不一樣尺寸的手機設備上，頁面「相對性的達到合理的展現（自適應）」或者「保持統一效果的等比縮放（看起來差很少）」。

概念理解

在作適配以前，須要先理解一些概念。對於不理解的地方，能夠搜索更多文章看看，本文總結的移動端兼容性問題解決方案囊括了4個思考方向, 注意不是惟一的具體的解決方案而是從四個角度來思考問題, 分別是html, css, 腳本以及http協議(服務端)的視角來考慮兼容問題, 僅供參考~

HTTP: 匹配UserAgent字段

User Agent中文名爲用戶代理，簡稱 UA，它是一個特殊字符串頭，使得服務器可以識別客戶使用的操做系統及版本、CPU 類型、瀏覽器及版本、瀏覽器渲染引擎、瀏覽器語言、瀏覽器插件等。

最主流的方法就是在服務端/客戶端查詢這個字段:

1. //檢測是不是移動端

2.        function checkMobile() {

3.            if (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {

4.                alert("請在移動端查看（或者開發者模式）");

5.            }

6.        }

JS: 判斷window和screen

屏幕可用工做區高度/寬：window.screen.availHeight/window.screen.availWidth

屏幕分辨率的高/寬：+window.screen.height/window.screen.width

網頁可見區域寬/高：+document.body.clientWidth/document.body.clientHeight

我喜歡一種暴力的方式:

1.    ///嘿嘿嘿

2.    let device = window.innerWidth < window.innerHeight ? "phone" : "laptop";

CSS: @媒體查詢

經過查詢屏幕寬度判斷手機,只侷限於css樣式;
特色是,媒體查詢動態更新,很是方便,並且不只適應屏幕大小,還動態兼容窗口尺寸的改變:

1. @CHARSET "UTF-8";

2. @media (max-width: 991px) {

3.    /*do something*/

4. }

5. @media (min-width: 1601px) {

6.    /*do something*/

7. }

HTML: 添加縮放標籤

也是很是實用的,一般手機屏幕的ppi/dpi很是高,因此正常的字體會顯得很小,因而最好在html頭中添加如下viewport標籤:

1. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

width 設置layout viewport 的寬度，爲一個正整數，或字符串」width-device」initial-scale 設置頁面的初始縮放值，爲一個數字，能夠帶小數minimum-scale 容許用戶的最小縮放值，爲一個數字，能夠帶小數maximum-scale 容許用戶的最大縮放值，爲一個數字，能夠帶小數height 設置layout viewport 的高度，這個屬性對咱們並不重要，不多使用user-scalable 是否容許用戶進行縮放，值爲」no」或」yes」, no 表明不容許，yes表明容許