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

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

1、meta基礎知識

H5頁面窗口自動調整到設備寬度，並禁止用戶縮放頁面

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

忽略將頁面中的數字識別爲電話號碼

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

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

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

1. 當網站添加到主屏幕快速啓動方式，可隱藏地址欄，僅針對ios的safari

<!-- ios7.0版本之後，safari上已看不到效果 --> 

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

1. 將網站添加到主屏幕快速啓動方式，僅針對ios的safari頂端狀態條的樣式

<!-- 可選default、black、black-translucent --> 

<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 

2、常見問題

移動端如何定義字體font-family，中文字體使用系統默認便可，英文用Helvetica

移動端字體單位font-size選擇px仍是rem。對於只須要適配手機設備，使用px便可，對於須要適配各類移動設備，使用rem，例如只須要適配iPhone和iPad等分辨率差異比較挺大的設備。

移動端touch事件(區分webkit 和 winphone)

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

如下支持webkit：

一、touchstart——當手指觸碰屏幕時候發生。無論當前有多少隻手指

二、 touchmove——當手指在屏幕上滑動時連續觸發。一般咱們再滑屏頁面，會調用event的preventDefault()能夠阻止默認狀況的發生：阻止頁面滾動

三、touchend——當手指離開屏幕時觸發

四、touchcancel——系統中止跟蹤觸摸時候會觸發。例如在觸摸過程當中忽然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用

移動端click屏幕產生200-300 ms的延遲響應

移動設備上的web網頁是有300ms延遲的，每每會形成按鈕點擊延遲甚至是點擊失效。

解決方案

fastclick能夠解決在手機上點擊事件的300ms延遲

zepto的touch模塊，tap事件也是爲了解決在click的延遲問題

觸摸事件的響應順序

一、ontouchstart

二、ontouchmove

三、ontouchend

四、onclick

解決300ms延遲的問題，也能夠經過綁定ontouchstart事件，加快對事件的響應。

 

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

移動端的視覺稿一般會設計爲傳統PC的2倍。

前端的應對方案是：設計稿切出來的圖片長寬保證爲偶數，並使用backgroud-size把圖片縮小爲原來的1/2；

例如圖片寬高爲：200px*200px，那麼寫法以下：.css{width:100px;height:100px;background-size:100px 100px;}其它元素的取值爲原來的1/2，例如視覺稿40px的字體，使用樣式的寫法爲20px：.css{font-size:20px}

 

ios系統中元素被觸摸時產生的半透明灰色遮罩怎麼去掉？

ios用戶點擊一個連接，會出現一個半透明灰色遮罩, 若是想要禁用，可設置-webkit-tap-highlight-color的alpha值爲0，也就是屬性值的最後一位設置爲0就能夠去除半透明灰色遮罩

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

 

部分android系統中元素被點擊時產生的邊框怎麼去掉？

android用戶點擊一個連接，會出現一個邊框或者半透明灰色遮罩, 不一樣生產商定義出來額效果不同，可設置-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標籤產生的邊框》

 

一、winphone系統a、input標籤被點擊時產生的半透明灰色背景怎麼去掉？

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

 

二、webkit表單元素的默認外觀怎麼重置？

.css{-webkit-appearance:none;} 

 

三、webkit表單輸入框placeholder的顏色值能改變麼？

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

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

 

四、webkit表單輸入框placeholder的文字能換行麼？

ios能夠，android不行~

 

IE10（winphone8）表單元素默認外觀如何重置？

 

一、禁用 select 默認下拉箭頭

::-ms-expand 適用於表單選擇控件下拉箭頭的修改，有多個屬性值，設置它隱藏 (display:none) 並使用背景圖片來修飾可獲得咱們想要的效果。

select::-ms-expand {display: none;} 

 

二、禁用 radio 和 checkbox 默認樣式

::-ms-check 適用於表單複選框或單選按鈕默認圖標的修改，一樣有多個屬性值，設置它隱藏 (display:none) 並使用背景圖片來修飾可獲得咱們想要的效果。

input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{ 

display: none; 

} 

 

三、禁用PC端表單輸入框默認清除按鈕

當表單文本輸入框輸入內容後會顯示文本清除按鈕，::-ms-clear 適用於該清除按鈕的修改，一樣設置使它隱藏 (display:none) 並使用背景圖片來修飾可獲得咱們想要的效果。

input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{ 

display: none; 

} 

 

四、禁止ios 長按時不觸發系統的菜單，禁止ios&android長按時下載圖片

.css{-webkit-touch-callout: none} 

 

五、禁止ios和android用戶選中文字

.css{-webkit-user-select:none} 

 

參考《如何改變表單元素的外觀(for Webkit and IE10)》

 

打電話發短信的怎麼實現？

一、打電話

<a href="tel:0755-10086">打電話給:0755-10086</a> 

二、發短信

winphone系統無效

 

<a href="sms:10086">發短信給: 10086</a> 

模擬按鈕hover效果

移動端觸摸按鈕的效果，可明示用戶有些事情正要發生，是一個比較好體驗，可是移動設備中並無鼠標指針，使用css的hover並不能知足咱們的需求，還好國外有個激活css的active效果，代碼以下：

<div class="btn-blue">按鈕</div> 

 

<script type="text/javascript"> 

document.addEventListener("touchstart", function(){}, true) 

</script> 

 

兼容性ios5+、部分android 4+、winphone 8

要作到全兼容的辦法，可經過綁定ontouchstart和ontouchend來控制按鈕的類名

 

<div class="btn-blue">按鈕</div> 

 

<script type="text/javascript"> 

varbtnBlue = document.querySelector(".btn-blue"); 

btnBlue.ontouchstart = function(){ 

this.className = "btn-blue btn-blue-on" 

} 

btnBlue.ontouchend = function(){ 

this.className = "btn-blue" 

} 

</script> 

 

屏幕旋轉的事件和樣式

 

一、事件

window.orientation，取值：正負90表示橫屏模式、0和180表現爲豎屏模式；

 

window.onorientationchange = function(){ 

switch(window.orientation){ 

case -90: 

case 90: 

        alert("橫屏:" + window.orientation); 

case 0: 

case 180: 

        alert("豎屏:" + window.orientation); 

break; 

    } 

}   

 

二、樣式

/*豎屏時使用的樣式*/ 

@media all and (orientation:portrait) { .css{} }  

 

/*橫屏時使用的樣式*/ 

@media all and (orientation:landscape) { 

.css{} 

} 

 

audio元素和video元素在ios和andriod中沒法自動播放

應對方案：觸屏即播

$('html').one('touchstart',function(){ 

audio.play() 

}) 

可參考《沒法自動播放的audio元素》

搖一搖功能

HTML5 deviceMotion：封裝了運動傳感器數據的事件，能夠獲取手機運動狀態下的運動加速度等數據。

 

手機拍照和上傳圖片

<input type="file">的accept 屬性

<!-- 選擇照片 -->

<input type=file accept="image/*">

<!-- 選擇視頻 -->

<input type=file accept="video/*">

 

使用總結：ios 有拍照、錄像、選取本地圖片功能，部分android只有選取本地圖片功能，winphone不支持

 

微信瀏覽器用戶調整字體大小後頁面矬了，怎麼阻止用戶調整？

緣由

Anroid則是複寫了layoutinflater 對textview作了統一處理

Ios則是修改了body.style.webkitTextSizeAdjust值

普通解決方案：android暫無方案

ios使用-webkit-text-size-adjust禁止調整字體大小

body{-webkit-text-size-adjust: 100%!important;} 

最好的解決方案：整個頁面用rem或者百分比佈局

消除transition閃屏

.css{ 

/*設置內嵌的元素在 3D 空間如何呈現：保留 3D*/ 

-webkit-transform-style: preserve-3d; 

/*（設置進行轉換的元素的背面在面對用戶時是否可見：隱藏）*/ 

-webkit-backface-visibility: hidden; 

} 

 

開啓硬件加速，解決頁面閃白，保證動畫流暢

 

.css {  

   -webkit-transform: translate3d(0, 0, 0);  

   -moz-transform: translate3d(0, 0, 0);  

   -ms-transform: translate3d(0, 0, 0);  

   transform: translate3d(0, 0, 0);  

}  

參考《用CSS開啓硬件加速來提升網站性能》

 

取消input在ios下，輸入的時候英文首字母的默認大寫

<input autocapitalize="off" autocorrect="off" />

 

android 上去掉語音輸入按鈕

input::-webkit-input-speech-button {display: none}

android 2.3 bug

 

@-webkit-keyframes 須要以0%開始100%結束，0%的百分號不能去掉

after和before僞類沒法使用動畫

 

border-radius不支持%單位

translate百分比的寫法和scale在一塊兒會致使失效，例如-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)

android 4.x bug

三星 Galaxy S4中自帶瀏覽器不支持border-radius縮寫

同時設置border-radius和背景色的時候，背景色會溢出到圓角之外部分

部分手機(如三星)，a連接支持鼠標:visited事件，也就是說連接訪問後文字變爲紫色

 

參考《border-radius 移動之傷》

 

設計高性能CSS3動畫的幾個要素

儘量地使用合成屬性transform和opacity來設計CSS3動畫，不使用position的left和top來定位

利用translate3D開啓GPU加速

 

參考《High Performance Animations》

 

fixed bug

ios下fixed元素容易定位出錯，軟鍵盤彈出時，影響fixed元素定位

android下fixed表現要比iOS更好，軟鍵盤彈出時，不會影響fixed元素定位

ios9下不支持position:fixed

解決方案：可用isroll.js，暫無完美方案

 

參考

《移動端web頁面使用position:fixed問題總結》

《使用iScroll.js解決ios4下不支持position:fixed的問題》

如何阻止windows Phone的默認觸摸事件

winphone下默認觸摸事件事件使用e.preventDefault是無效的

 

目前解決方法是使用樣式來禁用

 

html{-ms-touch-action: none;}/* 禁止winphone默認觸摸事件 */ 

 

參考：《Windows phone 8 touch support》

 

經常使用的移動端框架

 

zepto.js

語法與jquery幾乎同樣，會jquery基本會zepto~，官網：http://zeptojs.com/

中文(非官網)：http://www.css88.com/doc/zeptojs_api/

常使用的擴展模塊：

瀏覽器檢測：https://github.com/madrobby/zepto/blob/master/src/detect.js

tap事件：https://github.com/madrobby/zepto/blob/master/src/touch.js

 

iscroll.js

解決頁面不支持彈性滾動，不支持fixed引發的問題~，實現下拉刷新，滑屏，縮放等功能~，

官網：http://cubiq.org/iscroll-5

 

滑屏框架

適合上下滑屏、左右滑屏等滑屏切換頁面的效果

slip.js， iSlider.js，fullpage.js