本文首發我的簡書

論移動端的問題，其實我碰到的很多都在ios端，本來一個頁面在安卓手機上跑得好好的，測試小哥突然拋個bug——ipnone7測試樣式需要優化之類的，每次拿到這些問題，都更加堅定了我不想用蘋果手機的決心…，下面我就將這些曾經困擾我的問題一一道來。
1. <input type=number>在ios上可以改變鍵盤型別從而輸入非數字(本來期望只能填入數字)
解決辦法：
1>如果只需要輸入整數的話可以直接使用<input type=tel>這個號碼盤式的鍵盤可以保證ios與安卓端均不能切換鍵盤型別。
2>如果需要輸入的數字帶有小數的話，目前我的解決辦法只有先用type=number然後在表單提交的時候對input的value值進行正則判斷了。（安卓即使切換了輸入型別也只能輸入數字，萬惡的ios…）
2. <input type=number maxlength=5>

input {
    background-color: #f4f4f4;
    font-size: 0.14rem;
    color: #7f7f7f;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    font-size:0.14
 
rem;/*小於等於0.14rem即可*/
    color: #b2b2b2;
}

4.上傳圖片/檔案失敗後無法再次上傳同一個檔案(不限於移動端)
解決辦法：
首先獲取到傳入檔案的引數event(onchange方法的回撥函式的引數event，在vue中則是@change的引數$event)
event打印出來是這樣的

然後在每次向後臺上傳的時候首先執行event.target.value = ''即可。
5. 文字偏上(ios)
ios經常會出現button裡面的文字偏上，還有類似於 “聯絡電話：xxxxxxx”xxxxx這一部分偏上的情況。
解決方法：
1>設定整行的height

.btn{
        display:flex;
        flex-direction:column;/*對於button可以使用column，像label-content這種形式還是使用row吧*/
        align-items: center;
        justify-content: center;
}

6.較長的文字在安卓端一行顯示，在ios會另起一行（在下一行顯示）
解決方法：ios端有個詞叫做“安全區域”，可以理解為系統內建的padding，既然這樣，我們就把這一行放文字元素的寬度改小一點吧（看起來旁邊會有些留白）
ps：1.這個問題可能不一定是安全區域的影響（查閱資料發現安全區域貌似是ios11才出來的，而我在使用同事的5s（ios9.3）測試的時候，也出現了該問題，所以就理解成ios有內建的padding吧）。
2.這個問題的出現可能是ui設計存在一定的考慮不周（右側沒有設定padding）
7. 時下流行的劉海屏適配問題
解決方法：
1>如果是在app裡面的話還是交給原生去做好一些
2>web app的話貌似瀏覽器應該會適配好了吧。。。
3>實在要前端適配的話可以參考 關於H5頁面在iPhoneX適配 (我自己沒試過)