禁止複製、選中文本
Element {-webkit-user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
user-select:none;
}
解決移動設備可選中頁面文本(視產品需要而定)
長時間按住頁面出現閃退
element {
-webkit-touch-callout:none;
}
iphone及ipad下輸入框默認內陰影
Element{
-webkit-appearance:none;
}
旋轉屏幕時，字體大小調整的問題
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6{
-webkit-text-size-adjust:100%;
}
圓角bug
某些Android手機圓角失效
background-clip: padding-box;
設置緩存
<meta http-equiv="Cache-Control"content="no-cache"/>
手機頁面通常在第一次加載後會進行緩存，然後每次刷新會使用緩存而不是去重新向服務器發送請求。如果不希望使用緩存可以設置no-cache。
移動端點擊300ms延遲
300ms尚可接受，不過因爲300ms產生的問題，我們必須要解決。300ms導致用戶體驗並不是很好，解決這個問題，我們一般在移動端用tap事件來取代click事件。
推薦兩個js，一個是fastclick，一個是tap.js
關於300ms延遲，具體請看：http://thx.github.io/mobile/300ms-click-delay/
ios和android下觸摸元素時出現半透明灰色遮罩
Element {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}
設置alpha值爲0就可以去除半透明灰色遮罩，備註：transparent的屬性值在android下無效。
後面一篇文章有詳細介紹，地址：http://www.jb51.net/post/phone_web_ysk
桌面圖標
<link rel="apple-touch-icon"href="touch-icon-iphone.png"/>
<link rel="apple-touch-icon"sizes="76x76"href="touch-icon-ipad.png"/>
<link rel="apple-touch-icon"sizes="120x120"href="touch-icon-iphone-retina.png"/>
<link rel="apple-touch-icon"sizes="152x152"href="touch-icon-ipad-retina.png"/>
iOS下針對不同設備定義不同的桌面圖標。如果不定義則以當前屏幕截圖作爲圖標。
上面的寫法可能大家會覺得會有默認光澤，下面這種設置方法可以去掉光澤效果，還原設計圖的效果！
<link rel="apple-touch-icon-precomposed"href="touch-icon-iphone.png"/>
圖片尺寸可以設定爲5757（px）或者Retina可以定爲114114（px），ipad尺寸爲72*72（px)
啓動畫面
<link rel="apple-touch-startup-image"href="start.png"/>
iOS下頁面啓動加載時顯示的畫面圖片，避免加載時的白屏。
可以通過madia來指定不同的大小：
<!--iPhone-->
<link href="apple-touch-startup-image-320x460.png"media="(device-width: 320px)" rel="apple-touch-startup-image"/>
<!-- iPhone Retina -->
<link href="apple-touch-startup-image-640x920.png"media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"/>
<!-- iPhone 5-->
<link rel="apple-touch-startup-image"media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">
<!-- iPad portrait-->
<link href="apple-touch-startup-image-768x1004.png"media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image"/>
<!-- iPad landscape-->
<link href="apple-touch-startup-image-748x1024.png"media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image"/>
<!-- iPad Retina portrait-->
<link href="apple-touch-startup-image-1536x2008.png"media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"/>
<!-- iPad Retina landscape-->
<link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image"/>
IOS中input鍵盤事件keyup、keydown、keypress支持不是很好
問題是這樣的，用input search做模糊搜索的時候，在鍵盤裏面輸入關鍵詞，會通過ajax後臺查詢，然後返回數據，然後再對返回的數據進行關鍵詞標紅。用input監聽鍵盤keyup事件，在安卓手機瀏覽器中是可以的，但是在ios手機瀏覽器中變紅很慢，用輸入法輸入之後，並未立刻相應keyup事件，只有在通過刪除之後才能相應！
ios 設置input 按鈕樣式會被默認樣式覆蓋
解決方式如下：
input,
textarea {
border: 0;
-webkit-appearance: none;
}
設置默認樣式爲none
解決辦法：
可以用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的效果！