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.解決前端移動設備不兼容問題
[email protected]，分尺寸設置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屬性

　　在網上找解決方案，但是沒有找到真正有用的。有幾個方法被網友認為可行，但是我這裏也沒有用，詳見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端用谷歌瀏覽器模擬調試都沒有問題，但在手機上運行後出現文字顯示不全的問題
使用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 系統中，中文輸入法輸入英文時，字母之間可能會出現一個六分之一空格
可以通過正則去掉：
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手機瀏覽器中變紅很慢，用輸入法輸入之後，並未立刻相應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。

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