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">
<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;
}