完成移動端的開發項目之后,發現谷歌自帶的調試器似乎沒有什么太大的作用,整天借同事的蘋果手機測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事件解決這個問題,大力推薦。
- 前端框架
- 進階攻略:前端最全的框架總結
- 進階攻略:前端完整的學習路線
- 進階攻略:最全的前端開源JS框架和庫
- 常用的六個富文本編輯器
- 移動端手勢的七個事件庫
- Bootstrap相關優質項目學習清單
- 三個Bootstrap免費字體和圖標庫
- jQuery實現多種切換效果的圖片切換的五款插件
- 移動端常用的四個框架
- 七個幫助你處理Web頁面層布局的jQuery插件
- 前端工具
- 八款前端開發人員更輕松的實用在線工具
- 推薦幾款好用的云筆記軟件
- 幾款在線的腦圖制作工具
- 細數那些年我用過的前端開發工具
- 九款優秀的企業項目協作工具推薦
- 細數那些帶打賞功能的平臺
- 干貨|幾個有用的問答平臺
- 前端資源
- web開發快速提高工作效率的一些資源
- 前端工程師們,這些干貨讓你開發效率加倍
- 那些我不得不收藏的技術網站
- 前端學習的幾個網站
- 老司機程序員用到的各種網站整理
- 前端幾個常用簡單的開發手冊拿走不謝
- 2017年度最流行的十大中國開源軟件
- 程序員常用的六大技術博客類
- 提高工作效率的幾個小技巧
- Bootstrap相關優質項目必備網址
- 前端技術棧
- h5調用底層接口的一些知識
- JS數組去重的6種算法實現
- Git安裝及密鑰的生成并上傳本地文件到GitHub上
- JS數組排序技巧匯總(冒泡、sort、快速、希爾等排序)
- 就如何快速免費提高網站排名小結
- 淺談移動端頁面無刷新跳轉問題的解決方案
- 移動端iPhone系列適配問題的一些坑
- HTML5在客戶端存儲數據的新方法——localStorage
- 移動開發之css3實現背景幾種漸變效果
- 前端雜談
- 程序員如何利用空余時間掙零花錢?
- 一個前端妹子的悲歡編程之路
- 【程序員交友】祈澈姑娘:假裝文藝與代碼齊飛的前端妹子
- 初中級前端開發工程師如何提升個人能力?
- 如何打造個人技術影響力
- 程序媛,堅持這幾個好習慣讓你越來越美
- 工作中如何快速成長和學習?
- 我是如何快速積累工作經驗
- 谷歌AI中國中心成立,人工智能勢不可擋?
- 前端面試
- 一份來自前端開發工程師的規范簡歷
- 2017前端精品面試文章總結
- 面試經歷:為即將找工作的你保駕護航
- 我的北漂之路 北漂如飲水,冷暖自知
- 如何在面試中脫穎而出?
- 2017年10大主流編程語言最新排行榜出爐
- 前端面試之前要準備的那些事