<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=.5,minimum-scale=.5,maximum-scale=1">

viewport 視口(可視區窗口)
默認不設置viewport一般可視區寬度在移動端是980
width 可視區的寬度 (number||device-width)
user-scalable 是否允許用戶縮放 (yes||no) iOS10無效 (我們放在事件章節解決)
initial-scale 初始縮放比例
minimum-scale 最小縮放比例

HTML5屏幕適配標簽設置：

<!-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait" />

<!-- QQ強制全屏 -->
<meta name="x5-fullscreen" content="true" />

<!-- uc強制豎屏 -->
<meta name="screen-orientation" content="portrait">

<!-- UC強制全屏 -->
 

<meta name="full-screen" content="yes">

<!-- UC應用模式 -->
<meta name="browsermode" content="application">

<!-- QQ應用模式 -->
<meta name="x5-page-mode" content="app">

<!-- windows phone 點擊無高光 -->
<meta name="msapplication-tap-highlight" content="no">
 

Meta標簽中的format-detection屬性及含義：

<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta name="format-detection" content="adress=no"  />

<meta name="format-detection" content="telephone=no,email=no,adress=no" />

你明明寫的一串數字沒加鏈接樣式，而iPhone會自動把你這個文字加鏈接樣式、並且點擊這個數字還會自動撥號！想去掉這個撥號鏈接該如何操作呢？這時我們的meta又該大顯神通了，代碼如下：

telephone=no就禁止了把數字轉化為撥號鏈接！
telephone=yes就開啟了把數字轉化為撥號鏈接，要開啟轉化功能，這個meta就不用寫了,在默認是情況下就是開啟！

二、email

告訴設備不識別郵箱，點擊之後不自動發送

email=no禁止作為郵箱地址！
email=yes就開啟了把文字默認為郵箱地址，這個meta就不用寫了,在默認是情況下就是開啟！

三、adress

adress=no禁止跳轉至地圖！
adress=yes就開啟了點擊地址直接跳轉至地圖的功能,在默認是情況下就是開啟！

移動端一些樣式兼容說明：

body * {
    -webkit-text-size-adjust: 100%;
    /*禁止頁面文字選擇  在事件章節 去兼容安卓*/
    -webkit-user-select: none; 
    /*禁用長按頁面時的彈出菜單(iOS下有效) ,img和a標簽都要加*/
    -webkit-touch-callout   -webkit-touch-callout:none;  
}
a, 
input, 
button{
    /*禁用高亮，去除ios下一個鏈接或者通過Javascript定義的可點擊元素的時候，它就會出現一個半透明的灰色背景*/
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);    
    /*消除輸入框和按鈕的原生外觀，在iOS上加上這個屬性才能給按鈕和輸入框自定義樣式 */
    -webkit-appearance: none;
    border-radius: 0;
}

Font Boosting在一段文字我們沒有給他設置高度的時候，在webkit內核下，文字的大小被瀏覽器放大了

解決辦法:
1.設置高度
2.設置最大高度 max-height

移動端獲取根元素字體大小：

(function(){
  //獲取html元素
  var html = document.documentElement;
  //獲取設備的寬度
  var hWidth = html.getBoundingClientRect().width;
  //console.log(‘當前設備的寬度是：‘ + hWidth + ‘px‘ );
        //獲取根元素字體大小
        html.style.fontSize = hWidth/16 + "px";

})();

移動端學習筆記（一）