完成移動端的開發項目之后，發現谷歌自帶的調試器似乎沒有什么太大的作用，整天借同事的蘋果手機測bug,盡管同事不厭其煩，但還是覺得這iPhone系列適配問題適配到想逃逃逃，好在項目已經順利完成，測試通過，下面就是開發過程中遇到的一些坑。 ### 問題一：蘋果手機上的input按鈕自帶漸變效果 一樣的代碼，為啥在蘋果手機上的input按鈕就自帶漸變效果，搞特殊嗎？怎么讓它顯示正常？只需要加上outline:0px; -webkit-appearance:none; 清除原有樣式，同時蘋果手機上的input按鈕自帶圓角需要按需要去掉 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*/ } ~~~ PS:其實也可以直接使用實際的 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 因為在touch事件觸發之后，瀏覽器要判斷用戶是否會做出雙擊屏幕的操作，所以會等待300ms來判斷，再做出是否觸發click事件的處理，所以就會有300ms的延遲 解決方法：使用touch事件來代替click事件，如 zepto.js 的tap事件和fastClick，注：每次我都使用fastclick解決，這個插件最良心了，都有相應的事件可以代替click事件解決這個問題，大力推薦。