移動端iPhone系列適配問題的一些坑

完成移動端的開發項目以後，發現谷歌自帶的調試器彷佛沒有什麼太大的做用，成天借同事的蘋果手機測bug,儘管同事不厭其煩，但仍是以爲這iPhone系列適配問題適配到想逃逃逃，好在項目已經順利完成，測試經過，下面就是開發過程當中遇到的一些坑。

圖片.png

圖片.png

問題一：蘋果手機上的input按鈕自帶漸變效果

同樣的代碼，爲啥在蘋果手機上的input按鈕就自帶漸變效果，搞特殊嗎？怎麼讓它顯示正常？只須要加上outline:0px; -webkit-appearance:none; 清除原有樣式，同時蘋果手機上的input按鈕自帶圓角須要按須要去掉

outline:0px; -webkit-appearance:none; outline:0px; -webkit-appearance:none;

圖片.png

問題二：表單input元素獲取焦點時頁面被放大的解決辦法

緣由：在iPhone上點擊input框會有一個動畫效果，這是蘋果公司默認設置的，每次input獲取焦點都會使頁面放大，效果很是很差看，通過多方百度尋求到了一個完美的解決方案

<!--加入meta標記-->
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width">
user-scalable改成no便可。

問題三：iPhone6 Plus大屏幕的適配問題

有時候，明明已經用了簡單粗暴的媒體查詢viewport的方式：

<meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

可是，仍是會出現不適配的問題哦，那就在原有頁面的基礎上，再針對相應的屏幕大小單獨寫樣式作適配。

@media(min-device-width:375px)and(max-device-width:667px)and(-webkit-min-device-pixel-ratio:2){ /*iphone6*/ } @media(min-device-width:414px)and(max-device-width:736px)and(-webkit-min-device-pixel-ratio:3){ /*iphone6plus*/ } @media(min-device-width:375px)and(max-device-width:667px)and(-webkit-min-device-pixel-ratio:2){ /*iphone6*/ } @media(min-device-width:414px)and(max-device-width:736px)and(-webkit-min-device-pixel-ratio:3){ /*iphone6plus*/ }

1.png

PS:其實也能夠直接使用實際的

device-width：如device-width:375px device-width：如device-width:375px

問題四：移動端input 沒法獲取焦點的問題

測試的時候發現了一個bug,移動端的input都不能輸入了，後來發現原來是這個梗

－webkit－user-select ：none ;

緣由：在移動端開發中，咱們有時有針對性的寫一些特殊的重置，在整個項目之中有一個需求，禁止用戶進行復制.選擇.，因而寫了這樣的代碼 -webkit-user-select: none;影響到了input獲取焦點。

辦法:把-webkit-user-select:none改爲-webkit-user-select:auto;覆蓋掉或者直接註釋掉就行，個人項目是須要的，就不用註釋了。

問題五：手機端 click 事件會有大約 300ms 的延遲

緣由：手機端事件以下

touchstart –> touchmove –> touchend or touchcancel –> click touchstart –> touchmove –> touchend or touchcancel –> click

由於在touch事件觸發以後，瀏覽器要判斷用戶是否會作出雙擊屏幕的操做，因此會等待300ms來判斷，再作出是否觸發click事件的處理，因此就會有300ms的延遲

解決方法：使用touch事件來代替click事件，如 zepto.js 的tap事件和fastClick，注：每次我都使用fastclick解決，這個插件最良心了，都有相應的事件能夠代替click事件解決這個問題，大力推薦。

原文做者：祈澈姑娘
原文連接：https://www.jianshu.com/u/05f416aefbe1
創做不易，轉載請告知

90後前端妹子，愛編程，愛運營，愛折騰。堅持總結工做中遇到的技術問題，堅持記錄工做中所所思所見，歡迎你們一塊兒探討交流。有個很難漲粉的的公衆號叫：【編程微刊】