標籤：選中 val scale 螢幕 首字母 網頁 event mode 20px
1、防止手機中網頁放大和縮小
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
2、啟動或禁用自動識別頁面中的電話號碼
<meta name="format-detection" content="telephone=no">
3、html5調用安卓或者ios的撥號功能
<a href="tel:4008106999,1034">400-810-6999 轉 1034</a>
4、上下拉動捲軸時卡頓、慢
body { -webkit-overflow-scrolling: touch; overflow-scrolling: touch;}
5、禁止複製、選中文本
Element { -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none;}
6、長時間按住頁面出現閃退
element { -webkit-touch-callout: none;}
7、iphone及ipad下輸入框預設內陰影
Element{ -webkit-appearance: none; }
8、ios和android下觸摸元素時出現半透明灰色遮罩
Element { -webkit-tap-highlight-color:rgba(255,255,255,0)}
9、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>
10、旋轉螢幕時，字型大小調整的問題
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust:100%;}
11、某些Android手機圓角失效
background-clip: padding-box;
12、頂部狀態列背景色
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
13、取消緩衝
<meta http-equiv="Cache-Control" content="no-cache" />
14、啟動畫面
<link rel="apple-touch-startup-image" href="start.png"/>不同尺寸<!--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" />
15、特殊瀏覽器私人
QQ瀏覽器私人全螢幕模式<meta name="x5-fullscreen" content="true">強制豎屏<meta name="x5-orientation" content="portrait">強制橫屏<meta name="x5-orientation" content="landscape">應用模式<meta name="x5-page-mode" content="app">UC瀏覽器私人全螢幕模式<meta name="full-screen" content="yes">強制豎屏<meta name="screen-orientation" content="portrait">強制橫屏<meta name="screen-orientation" content="landscape">應用模式<meta name="browsermode" content="application">
其它針對手持功能最佳化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓<meta name="HandheldFriendly" content="true">微軟的老式瀏覽器<meta name="MobileOptimized" content="320">windows phone 點擊無高光<meta name="msapplication-tap-highlight" content="no">
16、 IOS中input鍵盤事件keyup、keydown、keypress支援不是很好
可以用html5的oninput事件去代替keyup
<input type="text" id="testInput"><script type="text/javascript"> document.getElementById(‘testInput‘).addEventListener(‘input‘, function(e){ var value = e.target.value; });</script>
17、IOS鍵盤字母輸入，預設首字母大寫
<input type="text" autocapitalize="off" />
18、移動端點擊300ms延遲
fastclick、tap.js、zepto、touchstart
19、移動端 HTML5 audio autoplay 失效問題
document.addEventListener(‘touchstart‘, function () { document.getElementsByTagName(‘audio‘)[0].play(); document.getElementsByTagName(‘audio‘)[0].pause();});
20、去除input預設樣式
input[type=number] { -moz-appearance:textfield;}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0;}
移動端瀏覽器問題
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
