移動端常見相容性問題及解決辦法

標籤：selector   ast   oid   roi   microsoft   sla   ros   ext   focus   

1. 當使用transform:translate3d(-50%,-50%,0)置中彈框（div）時，在pc端，內部的文字會模糊。
   解決辦法：給body定義樣式

   body{     font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;}

2. 用position:absolute/fixed;把一個按鈕固定在頁面的底部，在android系統中，當調用IME時，該按鈕會被頂起
   解決辦法：使用媒體查詢@media screen and (max-width:400px){}當頁面高度小於某一個值時，給元素一個top值

3. IOS系統調用第三方IME時，系統無法監測到input的input、focus、change、blur事件
   解決辦法:計算input值的length的長度，判斷input的值是否變化

4. 不同瀏覽器預設margin，padding不同。

   *{margin:0;padding:0;}

5. 不同瀏覽器的最小字型不同，有的是10px，有的是12px
   解決辦法：設定字型時，不要小於12px,如果一定要小於12px，使用transform:sacle()進行縮放
6. 透明度opacity
   解決辦法：IE8 以及更早的版本支援替代的 filter 屬性。例如：filter:Alpha(opacity=50)
7. 文字兩端置中text-align：justify；text-align-last：just；在移動端不起作用
   解決辦法：使用&#160；代替空格

移動端常見相容性問題及解決辦法