移動端常見問題及解決方案

一制轰、meta基礎知識

1. H5頁面窗口自動調整到設備寬度前计，并禁止用戶縮放頁面

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

2. 忽略將頁面中的數(shù)字識別為電話號碼

<meta name="format-detection" content="telephone=no" />?

3. 忽略Android平臺中對郵箱地址的識別

?<meta name="format-detection" content="email=no">?

4. 當網(wǎng)站添加到主屏幕快速啟動方式，可隱藏地址欄垃杖，僅針對ios的safari

<meta name="apple-mobile-web-app-capable" content="yes">

5. 將網(wǎng)站添加到主屏幕快速啟動方式，僅針對ios的safari頂端狀態(tài)條的樣式

<meta name="app-moblie-web-app-status-bar-style" content="back">

6.?winphone系統(tǒng)a旺垒、input標簽被點擊時產(chǎn)生的半透明灰色背景怎么去掉？

?<meta name="msapplication-tap-highlight" content="no">?

二苞冯、常見問題

1.移動端如何定義字體font-family

????????中文字體使用系統(tǒng)默認即可袖牙，英文用Helvetica

2. 移動端字體單位font-size選擇px還是rem。

????????對于只需要適配手機設備舅锄，使用px即可鞭达，對于需要適配各種移動設備，使用rem皇忿，例如只需要適配iPhone和iPad等分辨率差別比較挺大的設備畴蹭。

3. 移動端touch事件(區(qū)分webkit 和 winphone)

????????當用戶手指放在移動設備的屏幕上滑動會觸發(fā)的touch事件

????????以下支持webkit：

????????????1) touchstart——當手指觸碰屏幕時候發(fā)生。不管當前有多少只手指

????????????2) touchmove——當手指在屏幕上滑動時連續(xù)觸發(fā)鳍烁。通常我們再滑屏頁面叨襟，會調用event的preventDefault()可以阻止默認情況的發(fā)生：阻止頁面滾動

? ? ? ? ? ? 3) touchend——當手指離開屏幕時觸發(fā)

????????????4) touchcancel——系統(tǒng)停止跟蹤觸摸時候會觸發(fā)。例如在觸摸過程中突然頁面alert()一個提示框幔荒，此時會觸發(fā)該事件糊闽，這個事件比較少用

4. 移動端click屏幕產(chǎn)生200-300 ms的延遲響應

????????移動設備上的web網(wǎng)頁是有300ms延遲的，往往會造成按鈕點擊延遲甚至是點擊失效爹梁。

????????解決方案:

????????????1) fastclick可以解決在手機上點擊事件的300ms延遲

????????????2) zepto的touch模塊右犹，tap事件也是為了解決在click的延遲問題

????????觸摸事件的響應順序

????????????ontouchstart -- ontouchmove -- ontouchend -- onclick

????????解決300ms延遲的問題，也可以通過綁定ontouchstart事件姚垃，加快對事件的響應念链。

5. 在高清顯示屏中的位圖被放大，圖片會變得模糊积糯？

????????移動端的視覺稿通常會設計為傳統(tǒng)PC的2倍掂墓。

????????前端的應對方案是：設計稿切出來的圖片長寬保證為偶數(shù)，并使用backgroud-size把圖片縮小為原來的1/2看成；

????????例如圖片寬高為：200px*200px君编，那么寫法如下：

? ? ? ? ? ?.css{width:100px;height:100px;background-size:100px 100px;}?

? ? ? ? 其它元素的取值為原來的1/2，例如視覺稿40px的字體绍昂，使用樣式的寫法為20px：

? ? ? ? ? ? .css{font-size:20px}?

6. ios系統(tǒng)中元素被觸摸時產(chǎn)生的半透明灰色遮罩怎么去掉啦粹？

????????ios用戶點擊一個鏈接，會出現(xiàn)一個半透明灰色遮罩, 如果想要禁用窘游，可設置-webkit-tap-highlight-color的alpha值為0唠椭，也就是屬性值的最后一位設置為0就可以去除半透明灰色遮罩

? ? ? ? a,button,input,textarea { -webkit-tap-highlight-color:?rgba(0,0,0,0;) }??

7. 部分android系統(tǒng)中元素被點擊時產(chǎn)生的邊框怎么去掉？

????????android用戶點擊一個鏈接忍饰，會出現(xiàn)一個邊框或者半透明灰色遮罩, 不同生產(chǎn)商定義出來額效果不一樣贪嫂，可設置-webkit-tap-highlight-color的alpha值為0去除部分機器自帶的效果

? ? ? ? ? ?a,button,input,textarea{?

? ? ? ? ? ? ?????-webkit-tap-highlight-color:?rgba(0,0,0,0);?

? ? ? ? ? ? ?????-webkit-user-modify:read-write-plaintext-only;??

? ? ? ? ? ? }?

-webkit-user-modify有個副作用，就是輸入法不再能夠輸入多個字符

另外艾蓝，有些機型去除不了力崇，如小米2

對于按鈕類還有個辦法斗塘，不使用a或者input標簽，直接用div標簽

參考《如何去除android上a標簽產(chǎn)生的邊框》

8. webkit表單元素的默認外觀怎么重置亮靴？

?.css{-webkit-appearance:none;}?

9. webkit表單輸入框placeholder的顏色值能改變么馍盟？

input::-webkit-input-placeholder{color:#AAAAAA;}?

input:focus::-webkit-input-placeholder{color:#EEEEEE;}

10. webkit表單輸入框placeholder的文字能換行么？

ios可以茧吊，android不行~

11. 禁用 select 默認下拉箭頭

::-ms-expand?適用于表單選擇控件下拉箭頭的修改贞岭，有多個屬性值，設置它隱藏 (display:none)?