1. Preventing the enlargement and reduction of web pages in mobile phones is the most basic, and most mobile website developers should know that it is to set the viewport in meta
Some mobile websites we see the following statement:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
The way to set DTD is XHTML. If our page uses html5, we can directly declare <!DOCTYPE html> without setting DTD.
Use the viewport to disable zooming of the page. Usually set user-scalable to 0 to turn off the user's behavior of zooming the page view.
Complete viewport settings, of course, user-scalable=0, and some people also write user-scalable=no, all are fine.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
2. Some settings of Apple mobile phone.
<meta name="apple-mobile-web-app-capable" content="yes">
If content is set to yes, the web application will run in full screen mode, otherwise, it will not. The default value of content is no, which means normal display. You can use the read-only property window.navigator.standalone to determine whether the page is displayed in full screen mode.
3, format-detection settings.
<meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="email=no">
format-detection Enable or disable automatic identification of phone numbers and email addresses in pages.
4. When the scroll bar is pulled up and down, it is stuck and slow
body { -webkit-overflow-scrolling: touch; overflow-scrolling: touch; }
Android3+ and iOS5+ support CSS3's new property overflow-scrolling
5. Prohibit copying, selected text
Element { -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none; }
Workaround for mobile devices with optional page text (depending on product needs)
6. Press and hold the page for a long time and the page will flash back
element { -webkit-touch-callout: none; }
7. Default inner shadow of input box under iphone and ipad
Element{ -webkit-appearance: none; }
8. Translucent gray mask appears when touching elements under ios and android
Element { -webkit-tap-highlight-color:rgba(255,255,255,0) }
9. Active compatibility processing is pseudo-class: active invalid
Method 1: add ontouchstart to the body
<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、动画定义3D启用硬件加速
Element { -webkit-transform:translate3d(0, 0, 0) transform: translate3d(0, 0, 0); }
注意：3D变形会消耗更多的内存与功耗
11、Retina屏的1px边框
Element{ border-width: thin; }
12、旋转屏幕时，字体大小调整的问题
*{ -webkit-text-size-adjust:100%; }
13、顶部状态栏背景色
<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。
兼容性 iOS 2.1 +
14、设置缓存
<meta http-equiv="Cache-Control" content="no-cache" />
手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。
15、桌面图标
<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" />
16、浏览器私有及其它meta
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">
17、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){ var value = e.target.value; }); </script>