論移動端的問題衙熔，其實我碰到的很多都在ios端，本來一個頁面在安卓手機上跑得好好的搅荞，測試小哥突然拋個bug——ipnone7測試樣式需要優(yōu)化之類的红氯，每次拿到這些問題，都更加堅定了我不想用蘋果手機的決心...取具，下面我就將這些曾經(jīng)困擾我的問題一一道來脖隶。
<input type=number>在ios上可以改變鍵盤類型從而輸入非數(shù)字(本來期望只能填入數(shù)字)
解決辦法：
1>如果只需要輸入整數(shù)的話可以直接使用<input type=tel>這個號碼盤式的鍵盤可以保證ios與安卓端均不能切換鍵盤類型。
2>如果需要輸入的數(shù)字帶有小數(shù)的話暇检，目前我的解決辦法只有先用type=number然后在表單提交的時候?qū)nput的value值進行正則判斷了产阱。（安卓即使切換了輸入類型也只能輸入數(shù)字，萬惡的ios...）<input type=number maxlength=5>當(dāng)設(shè)置type=number時maxlength,minlength無效(僅限ios...)
解決方法：同樣在表單提交的時候先使用正則判斷一下块仆。input的
placeholder偏上构蹬，同樣僅限ios
解決辦法：使input的字體大小大于等于 placeholder的字體大小，例如
input {
background-color: #f4f4f4;
font-size: 0.14rem;
color: #7f7f7f;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
font-size:0.14rem;/*小于等于0.14rem即可*/
color: #b2b2b2;
}
-
上傳圖片/文件失敗后無法再次上傳同一個文件(不限于移動端)
解決辦法：
首先獲取到傳入文件的參數(shù)event(onchange方法的回調(diào)函數(shù)的參數(shù)event悔据，在vue中則是@change的參數(shù)$event)
event打印出來是這樣的
然后在每次向后臺上傳的時候首先執(zhí)行event.target.value = ''即可庄敛。 文字偏上(ios)
ios經(jīng)常會出現(xiàn)button里面的文字偏上，還有類似于 “聯(lián)系電話：xxxxxxx”xxxxx這一部分偏上的情況科汗。
解決方法：
1>設(shè)置整行的height或者min-height與line-height保持相等藻烤，這個方法對于像 聯(lián)系電話：xxxxx這樣的還是有效的，但是對于按鈕這樣的可能沒有效果头滔。
2>直接使用flex布局怖亭，專治各種疑難雜癥（ios低版本注意加前綴-webkit-）
.btn{
display:flex;
flex-direction:column;/*對于button可以使用column，像label-content這種形式還是使用row吧*/
align-items: center;
justify-content: center;
}
較長的文字在安卓端一行顯示坤检，在ios會另起一行（在下一行顯示）
解決方法：ios端有個詞叫做“安全區(qū)域”兴猩，可以理解為系統(tǒng)內(nèi)置的padding，既然這樣早歇，我們就把這一行放文本元素的寬度改小一點吧（看起來旁邊會有些留白）
ps：1.這個問題可能不一定是安全區(qū)域的影響（查閱資料發(fā)現(xiàn)安全區(qū)域貌似是ios11才出來的倾芝，而我在使用同事的5s（ios9.3）測試的時候，也出現(xiàn)了該問題箭跳，所以就理解成ios有內(nèi)置的padding吧）晨另。
2.這個問題的出現(xiàn)可能是ui設(shè)計存在一定的考慮不周（右側(cè)沒有設(shè)置padding）時下流行的劉海屏適配問題
解決方法：
1>如果是在app里面的話還是交給原生去做好一些
2>web app的話貌似瀏覽器應(yīng)該會適配好了吧。谱姓。借尿。
3>實在要前端適配的話可以參考 關(guān)于H5頁面在iPhoneX適配 (我自己沒試過)ios12以上直接使用鍵盤粘貼會粘貼兩次（通常是在粘貼短信驗證碼時出現(xiàn)）
解決辦法：如果是一個輸入框那么直接截取字符串的前一半，如果是輸入驗證碼的多個輸入框可以在第一個輸入框截取之后直接給后面的輸入框賦值（不要讓后面的輸入框聚焦）
轉(zhuǎn)載請注明出處http://www.reibang.com/p/109e721477f8
