移動端疑難特性、兼容性

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定位

 

（持續更新中……）