ios相容性問題

標籤：導致   判斷   ios11   部分   出現   處理   inline   tran   放大   

ios常見相容性問題

1.使用禁止選中文字屬性

        input {            -webkit-user-select: none;            -moz-user-select: none;            -khtml-user-select: none;            user-select: none;        }    這種寫法ios的input框會出現失能的問題(無法輸入內容),需要再給它添加另一屬性        input {            -webkit-user-select: auto;        }    

2.表單的input事件和change事件

ios11之後,有些情況使用input事件ios內建的IME,當選擇拼音輸入時會自動輸入多個字元,這是因為有時ios對input事件不相容導致的,使用change事件即可解決這個問題

ios收合IME時會失去焦點,觸發change事件,但是Android收合IME時並不會失去焦點,所以可以通過判斷UA的方式來針對不同系統使用不同的事件

3.line-height height 的相容

對於一般PC瀏覽器以及iOS裝置的瀏覽器表現就是我們想要的置中效果，但是大部分 Android 裝置的瀏覽器文字都會稍微向上偏離，

測試表明，字型字型大小為奇數的兩倍時（比如 10px、14px、18px、22px、26px），會出現嚴重位移現象。 其實系統之間效果的差異跟我們的字型類型、系統排版引擎、瀏覽器都有關係，其實不影響使用者瀏覽與操作等體驗，我們可以忽略這些問題，對於一些居於使用情境偏離的比較明顯的，可以使用下面提到的兩種處理方案。 方案一： 我們可以通過 transform: scale 來處理，比如，字型大小是 8px，我們把字型設定為 16px，然後通過 scale(0.5) 縮放至一倍大小，簡單粗暴。 注意：放大兩倍會使得容器被撐開佔位。 方案二： 結合行高、對齊的關係，結合虛擬元素得出的黑科技，親測效果很理想。

        .jd::before {        content: ‘‘;        display: inline-block;        vertical-align: middle;        width: 0;        height: 100%;        margin-top: 1px;    }    

ios相容性問題