移動端開發經常遇見的問題以及解決方案

標籤：首碼   view   transform   半透明   情況   觸摸   padding   event   apple   

1.移動端左右滑動右側有留白
出現這種問題的話查看一下自己的css中有沒有用到position:relative或者position:absolute,我做頁面的時候經常遇到這個問題，百分之一百是這個原因。
解決方案：只要設定html，body的width為100%，overflow：hidden就可以了。

2.iOS點擊事件無效果的幾個方案
1）為css添加cursor：pointer;
2）動態添加的元素要使用on綁定事件。
3）查詢是否引用了js檔案

3.設定animation動畫安卓沒有效果
為keyframes、animation、transform添加-webkit-首碼，缺一不可

4.設定了div高度為百分比不起作用
檢查htnl,body{height:100%}

5.ios使用on綁定click事件出現綁定父標籤閃爍的問題
給該元素一個樣式如下：-webkit-tap-highlight-color: rgba(0,0,0,0);

6.解決前端行動裝置不相容問題
使用@media設定裝置尺寸，分尺寸設定css，格式如下：
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : Portrait ) { }

7.iphone移動端click事件延遲300ms解決方案
1）禁止縮放：<meta name="viewport" content="width=device-width, user-scalable=no">
2）引用FastClick.js檔案，window.addEventListener( "load", function() { FastClick.attach( document.body );}, false );

8.防止點透事件
為上層元素的點擊事件添加 return false;

9.iPhone下非a標籤使用$.fn.on委託綁定沒有作用。

處理方案，給標籤加上cursor屬性
.event{
　　　　cursor:pointer;
}
10.移動端使用iframe載入跨域網頁出現“Refused to display in a frame becuase it set ‘X-Frame-Options‘ to ‘SAMEORIGIN”
　　假設你現在使用的跨域頁面是移動官網"http://wap.10086.cn/",如果使用pc地址"http://www.10086.cn/"則不會發生此問題。
原因：出於安全考慮，有的網站屏蔽了外部iframe的調用，比如上面的移動的移動端網頁wap,而移動pc端則沒有屏蔽。
解決方案：

　　在網上找解決方案，但是沒有找到真正有用的。有幾個方法被網友認為可行，但是我這裡也沒有用，詳見http://stackoverflow.com/questions/20498831/refused-to-display-in-a-frame-because-it-set-x-frame-options-to-sameorigin
　　如果支援前端來說，這個應該是沒有解決方案的，畢竟要訪問的網頁不是自己的。唯一的辦法是讓背景同事幫忙使用預設瀏覽器開啟這個網站。

11. webview中 sumsung手機使用margin-left:auto;margin-right:auto;來實現水平置中會導致該置中元素的寬度設定失效，寬度會自動填滿置中地區。

解決方案：定位+左距離50%+左位移元素寬度的一半
.center{
position:relative;
left:50%;
margin-left:-100px;
}

12.webview中 sumsung定義高度不起作用

　　解決方案：逼不得已使用padding撐起高度

13.webview中 sumsung margin-left不起作用

　　解決方案：逼不得已使用padding-left

14. webview中 iso input寬度置為0還是有顯示地區
解決方案是“width:0px;z-index:-1;border:none”

15.多行省略
單行省略比較簡單
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
合適WebKit瀏覽器或移動端（絕大部分是WebKit核心的）瀏覽器
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;

16.在使用flexbox布局時遇到的問題。
在使用flexbox的時候出現了一個奇怪的問題，就是容器中左邊的圖片設定了固定的寬高，依舊會發生變形。（並且這個問題只出現在動態取資料的情況下，靜態頁面不存在此問題）
經過分析發現原因在於：根據實際取到的標題文字數目不同會撐開塊並將左邊的圖片擠壓而導致形變。
解決方案一：之前是左邊定寬，右邊自適應，現在改為將左右用百分比表示寬度。
解決方案二：由於使用了flexbox布局，可以設定flex-shrink:0，當空間不足時該項不會縮小。或者使用flex-basis屬性，設定項目佔據的主軸空間。
總結：在使用flexbox布局時和平常做左部定寬右部自適應的布局時有小小的不一樣，就是不能只設定寬度，要用flex-basis專門設定項目佔據的主軸空間。

17.圖片大小不一，處理問題。
根據實際情況，每條新聞的封面圖片都是大小，長寬比例不一的，但都要放在相同大小的塊中展示，如何保證它們看起來不變形，效果良好的展示。
方案一：使用背景圖片展示，將圖片設定為固定大小的div塊的背景，然後設定background-position:center，這樣可以將圖片中間的主要內容展現出來，但缺點是遇到一些像素很高的圖片只會展示中間一小部分。
方案二：將塊固定長寬 overflow:hidden，然後圖片寬度width:100%，margin-top:-15px（這個位移可以根據實際情況而定）。當然這個也只能解決大部分情況，不能解決所有情況。

18.文字顯示不全問題

一開始在pc端用Google瀏覽器類比調試都沒有問題，但在手機上運行後出現文字顯示不全的問題
使用rem設定了塊的高度和字型，但rem是相對於根項目去計算字型大小的，並不是所有的裝置上根項目的大小都是相同的，由於這些誤差導致在一些手機瀏覽器上出現文字超出顯示不全。

原因：因為Chrome設定了最小字型大小為12px，導致如果在寬高、行高、邊距等地方用rem，雖然在html那設定了10px，但預設還是會按照12px來計算，所以實際會偏大。建議rem只是在字型大小上用比較好。
解決方案：首先設定根項目的字型大小。其次將寬高的單位改為px;
html{ font-size:10px} .title{ font-size:2rem;}

19.上下拉動捲軸時卡頓、慢
body {
-webkit-overflow-scrolling:touch;
overflow-scrolling: touch;
}
Android3+和iOS5+支援CSS3的新屬性為overflow-scrolling

20.移動端點擊300ms延遲
300ms尚可接受，不過因為300ms產生的問題，我們必須要解決。300ms導致使用者體驗並不是很好，解決這個問題，我們一般在移動端用tap事件來取代click事件。
推薦兩個js，一個是fastclick，一個是tap.js
關於300ms延遲，具體請看：http://thx.github.io/mobile/300ms-click-delay/

21.移動端點透問題
案例如下：
<div id="haorooms">點頭事件測試</div>

<a href="www.baidu.net">www.baidu.com</a>

div是絕對位置的蒙層,並且z-index高於a。而a標籤是頁面中的一個連結，我們給div綁定tap事件：
$(‘#haorooms‘).on(‘tap‘,function(){
$(‘#haorooms‘).hide();
});

我們點擊蒙層時 div正常消失，但是當我們在a標籤上點擊蒙層時，發現a連結被觸發，這就是所謂的點透事件。
原因：
touchstart 早於 touchend 早於click。 亦即click的觸發是有延遲的，這個時間大概在300ms左右，也就是說我們tap觸發之後蒙層隱藏， 此時 click還沒有觸發，300ms之後由於蒙層隱藏，我們的click觸發到了下面的a連結上。
解決：
（1）盡量都使用touch事件來替換click事件。例如用touchend事件(推薦)。
（2）用fastclick，https://github.com/ftlabs/fastclick
（3）用preventDefault阻止a標籤的click
（4）延遲一定的時間(300ms+)來處理事件 （不推薦）
（5）以上一般都能解決，實在不行就換成click事件。
下面介紹一下touchend事件，如下：
$("#haorooms").on("touchend",function(event) {
event.preventDefault();
});

22.關於 iOS 系統中，中文IME輸入英文時，字母之間可能會出現一個六分之一空格
可以通過正則去掉：
this.value = this.value.replace(/\u2006/g,‘‘);

23.ios 設定input 按鈕樣式會被預設樣式覆蓋
解決方式如下：
input,
textarea {
border: 0;
-webkit-appearance: none;
}
設定預設樣式為none

24. IOS中input鍵盤事件keyup、keydown、keypress支援不是很好
問題是這樣的，用input search做模糊搜尋的時候，在鍵盤裡面輸入關鍵詞，會通過ajax後台查詢，然後返回資料，然後再對返回的資料進行關鍵詞標紅。用input監聽鍵盤keyup事件，在安卓手機瀏覽器中是可以的，但是在ios手機瀏覽器中變紅很慢，用IME輸入之後，並未立刻相應keyup事件，只有在通過刪除之後才能相應！
解決辦法：
可以用html5的oninput事件去代替keyup
<input type="text"id="testInput">
<script type="text/javascript">
document.getElementById(‘testInput‘).addEventListener(‘input‘,function(e){
varvalue = e.target.value;
});
</script>
然後就達到類似keyup的效果！

25.禁止複製、選中文本

Element {-webkit-user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
user-select:none;
}
26.長時間按住頁面出現閃退
element {

-webkit-touch-callout:none;

}
27.ios和android下觸摸元素時出現半透明灰色遮罩
Element {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}

設定alpha值為0就可以去除半透明灰色遮罩，備忘：transparent的屬性值在android下無效。
後面一篇文章有詳細介紹，地址：http://www.jb51.net/post/phone_web_ysk

28.active相容處理 即 偽類 :active 失效
方法一：body添加ontouchstart
<body ontouchstart="">

方法二：js給 document 綁定 touchstart 或 touchend 事件
<style>
a {
color:#000;
}
a:active {
color:#fff;
}
</style>
<a herf=foo >bar</a>
<script>
document.addEventListener(‘touchstart‘,function(){},false);
</script>
29.旋轉螢幕時，字型大小調整的問題
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6{
-webkit-text-size-adjust:100%;
}
30.圓角bug
某些Android手機圓角失效
background-clip: padding-box;

31.頂部狀態列背景色
<meta name="apple-mobile-web-app-status-bar-style"content="black"/>
說明：
除非你先使用apple-mobile-web-app-capable指定全螢幕模式，否則這個meta標籤不會起任何作用。
如果content設定為default，則狀態列正常顯示。如果設定為blank，則狀態列會有一個黑色的背景。如果設定為blank-translucent，則狀態列顯示為黑色半透明。如果設定為default或blank，則頁面顯示在狀態列的下方，即狀態列佔據上方部分，頁面佔據下方部分，二者沒有遮擋對方或被遮擋。如果設定為blank-translucent，則頁面會充滿螢幕，其中頁面頂部會被狀態列遮蓋住（會覆蓋頁面20px高度，而iphone4和itouch4的Retina螢幕為40px）。預設值是default。

32.設定緩衝
<meta http-equiv="Cache-Control"content="no-cache"/>

手機頁面通常在第一次載入後會進行緩衝，然後每次重新整理會使用緩衝而不是去重新向伺服器發送請求。如果不希望使用緩衝可以設定no-cache。

 

移動端開發經常遇見的問題以及解決方案