web移動端兼容操作總結 原

##WEB兼容手機屏幕和輸入設備的主要的4種參考

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

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

//檢測是否是移動端
        function checkMobile() {
            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))) {
                alert("請在移動端查看（或者開發者模式）");
            }
        }

###JS: 判斷window和screen 屏幕可用工作區高度/寬：window.screen.availHeight/window.screen.availWidth

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

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

我喜歡一種暴力的方式:

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

###CSS: @媒體查詢 通過查詢屏幕寬度判斷手機,只侷限於css樣式; 特點是,媒體查詢動態更新,非常方便,而且不僅適應屏幕大小,還動態兼容窗口尺寸的改變:

@CHARSET "UTF-8";
@media (max-width: 991px) {
    /*do something*/
}
@media (min-width: 1601px) {
    /*do something*/
}

###HTML: 添加縮放標籤 也是非常實用的,通常手機屏幕的ppi/dpi非常高,所以正常的字體會顯得很小,於是最好在html頭中添加以下viewport標籤:

<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代表允許