移動端疑難特性、相容性

1.   safari瀏覽器字體不能自動隨網頁縮放調整大小

-webkit-text-size-adjust:100%

1.  點擊<button><input>有灰色透明背景

-webkit-tap-highlight-color:rgba(0,0,0,0);   

1. 微信、QQ內置瀏覽器視頻自動全屏

非騰訊功能變數名稱的視頻地址都會

1. iphoneX預設網頁顯示在安全區域內，不全屏

<meta name="viewport" content="viewport-fit=cover">

1. flex佈局不相容，加上首碼也不行（常見於華為或舊版iOS）

display: -webkit-box;

display: box;

display: -webkit-flex;

display: flex;

須聲明box和flex兩種。

1.  Android設置line-height有偏移不垂直居中

原因：1. 字體不是偶數

           2. 用rem單位

解決方案：

           1. 字體變大

           2. 增加父元素，設置diaplay: table-cell; vertical-align: middle

           3. 元素放大兩倍，再縮小

           4. line-height: 1; 用padding-top撐起父元素。

5. 用px單位           

           6. 用圖片去顯示

1.  iOS預設不可點擊元素點擊事件失效

當委托給一個元素添加click事件時，如果事件是委托到 document 或 body 上，並且委托的元素是預設不可點擊的(如 div, span 等)，此時 click 事件會失效

解決方案：

1. 將 click 事件直接綁定到目標元素(即 .target ) 上
2. 將目標元素換成 <a> 或者 <button> 等可點擊的元素
3. 給目標元素添加一個空的 onclick=""(<div class="target" onclick="">點擊我!</div>)
4. 把 click 改成 touchend 或 touchstart（註意加上preventDefault）
5. 將 click 元素委托到非 document 或 body 的父級元素上
6. 給目標元素加一條樣式規則 cursor: pointer; 

最後一種解決方案最簡單，推薦。

8. 部分移動端瀏覽器不支持space-evenly

解決方案：

用space-arround代替，或通過設置寬度、margin等佈局

9. 移動端（尤其是iOS）一些瀏覽器具有下拉回彈效果，fixed定位元素不跟著下拉

解決方案：

a. 放棄fixed定位

b. 如導航欄等要實現固定於頂部效果，無需跟著下拉，則用fixed定位

（持續更新中……）