移動端iPhone系列適配問題

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

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

問題二：表單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*/ } 

 

1.png

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事件解決這個問題，大力推薦。

連接：https://www.jianshu.com/p/b26dce4d548f