safari瀏覽器字型不能自動隨網頁縮放調整大小
-webkit-text-size-adjust:100%
點選有灰色透明背景
-webkit-tap-highlight-color:rgba(0,0,0,0);
iphonex預設網頁顯示在安全區域內，不全屏
flex布局不相容，加上字首也不行（常見於華為或舊版ios）
display: -webkit-box;
display: box;
display: -webkit-flex;
display: flex;
須宣告box和flex兩種。
android設定line-height有偏移不垂直居中
原因：1. 字型不是偶數
2. 用rem單位
解決方案：
1. 字型變大
2. 增加父元素，設定diaplay: table-cell; vertical-align: middle
3. 元素放大兩倍，再縮小
4. line-height: 1; 用padding-top撐起父元素。
5. 用px單位
6. 用去顯示
ios預設不可點選元素點選事件失效
當委託給乙個元素新增click事件時，如果事件是委託到 document 或 body 上，並且委託的元素是預設不可點選的(如 div, span 等)，此時 click 事件會失效
解決方案：
將 click 事件直接繫結到目標元素(即 .target ) 上
將目標元素換成 或者 等可點選的元素
給目標元素新增乙個空的 onclick=""(點選我!
)把 click 改成 touchend 或 touchstart（注意加上preventdefault）
將 click 元素委託到非 document 或 body 的父級元素上
給目標元素加一條樣式規則 cursor: pointer;
最後一種解決方案最簡單，推薦。
8. 部分移動端瀏覽器不支援space-evenly
解決方案：
用space-arround代替，或通過設定寬度、margin等布局
9. 移動端（尤其是ios）一些瀏覽器具有下拉回彈效果，fixed定位元素不跟著下拉
解決方案：
a. 放棄fixed定位
b. 如導航欄等要實現固定於頂部效果，無需跟著下拉，則用fixed定位
（持續更新中……）
css移動端相容性解決方案
一般而言，目前比較主流的應該就是rem和vw，關於這些文章網路部落格上應該已經挺多的 rem的相容性相對於vw更好 今天看到張鑫旭的一篇部落格，覺得寫的挺好的 經過大型專案實踐，下面這段css是最好的基於rem和vm和calc實踐 html media screen and min width 37...
移動端頁面相容性解決方案
一,css部分 1,meta標籤 maximum scale 1,minimum scale 1,user scalable no 移動端加上這個標籤才是真正的自適應，不加的話，假如你把乙個980px寬度 手機端常規是980 的pc網頁放在手機上顯示，倒也能正常顯示不出現滾動條，不過是移動裝置對頁面...
相容性（空格相容性）
在chrome與firefox下顯示的寬度不同，原因是兩個瀏覽器的預設字型不同，給html規定字型即可解決。下面有各種形式的空格，各有不同 不換行空格，按下空格鍵所產生的空格，受字型影響明顯 ensp 半形空格 em寬度的一半 乙個小寫字母的寬度 基本不受字型影響 emsp 全形空格 乙個em寬度 ...