H5移动端开发注意事项
一、关于meta
(一)、常用的公共meta属性
1、viewport
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
| 属性 | 属性 |
|---|---|
| width=device-width | 宽度=设备屏幕的宽度（px） |
| minimum-scale | 允许用户缩放到的最小比例 |
| maximum-scale | 允许用户缩放到的最大比例 |
| user-scalable | 用户是否可以手动缩放 |
2、Format-detection(格式检测)
**默认情况下，设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能。
<meta name="format-detection" content="telephone=no,email=no,adress=no"/>
如果禁用，html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了。
固话:
<a href="tel:01012345678,110">010-12345678 转110a>
手机：
<a href="tel:13011111111">13011111111a>
3、设置缓存
<meta http-equiv="Cache-Control" content="no-cache" />
手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。
如果不希望使用缓存可以设置no-cache。
(二)、iOS私有meta属性
1、是否全屏显示
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-touch-fullscreen" content="yes"/>
网站开启对web app程序的支持。
若content设置为yes，Web应用会以全屏模式运行，反之不会。
content默认值为no，表示正常显示。
可以通过制度属性window.navigator.standalone来确定是否以全屏模式显示。
为了更好的兼容性，以上两个meta可以都写上！
2、web app应用下状态条（屏幕顶部条）颜色
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
除非先使用apple-mobile-web-app-capable指定全屏模式，否则这个meta标签不会起任何作用。
默认值为default（白色），可以定位black(黑色)和black-translucent(灰色半透明)。
若值为"black-translucent"将会占据页面px位置，浮在页面上方（会覆盖页面20px高度-iPhone4和iTouch4的Retina屏幕为40px）
3、添加至主屏幕设置
Safari浏览器中点击添加至主屏幕按钮，会默认生成一个截图的图标，相当于浏览器创建了一个快捷方式。
添加至主屏幕后，桌面图片和启动画面的设置
桌面图标设置：
<link rel="apple-touch-icon" type="text/css" href="touch-icon-iphone.png"/>
<link rel="apple-touch-icon-precomposed" type="text/css" href="touch-icon-iphone.png"/>
图片尺寸可以设定为57_57（px）或者Retina可以定为114_114（px），ipad尺寸为72*72（px)。
启动画面设置：
<link rel="apple-touch-startup-image" type="text/css" href="wendd_startup.png"/>
iOS下页面启动加载时显示的画面图片，避免加载时的白屏。
可以通过madia来指定不同的大小：
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<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">
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />
<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" />
二、关于样式
1、上下拉动滚动条时卡顿、慢
body{
overflow-scrolling: touch;
-webkit-overflow-scrolling: touch;
}
2、禁止复制、选中文本
Element{
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
注：解决移动设备可选中页面文本（视产品需求而定）
3、长时间按住页面出现闪退
Element{
-webkit-touch-callout: none;
}
4、iPhone和iPad下输入框默认内阴影
Element{
-webkit-appearance: none;
}
5、iPhone和Android下触摸元素时出现半透明灰色遮罩
Element{
-webkit-tap-highlight-color: rgba(255,255,255,0);
}
设置alpha值为0，可以去除班都没灰色遮罩
注：transparent的属性值在Android下无效。
6、active兼容处理（伪类 :active 失效）
"">
或给 document 绑定 touchstart 或 touchend 事件
bar
7、动画定义3D启用硬件加速
Element{
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
8、Retina屏的1px边框
Element{
border-width: thin;
}
9、旋转屏幕时，字体大小调整的问题
html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{
-webkit-text-size-adjust: 100%;
}
10、transition闪屏
设置内嵌的元素在3D空间，保留3D
Element{
-webkit-transform-style: preserve-3d;
}
设置进行转换的元素的背面在面对用户是是否可见：隐藏
Element{
-webkit-backface-visibility:hidden;
}
11、圆角bug
某些Android手机圆角失效
Element{
background-clip:padding-box;
}