一、关于meta
(一)、常用的公共meta属性
1、viewport
| 属性 | 备注 |
|---|---|
| width=device-width | 宽度=设备屏幕的宽度（px） |
| minimum-scale | 允许用户缩放到的最小比例 |
| maximum-scale | 允许用户缩放到的最大比例 |
| user-scalable | 用户是否可以手动缩放 |
2、Format-detection(格式检测)
默认情况下，设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能。
如果禁用，html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了。
固话:
010-12345678 转110
手机：
13011111111
3、设置缓存
手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。
如果不希望使用缓存可以设置no-cache。
(二)、iOS私有meta属性
1、是否全屏显示
网站开启对web app程序的支持。
若content设置为yes，Web应用会以全屏模式运行，反之不会。
content默认值为no，表示正常显示。
可以通过制度属性window.navigator.standalone来确定是否以全屏模式显示。
为了更好的兼容性，以上两个meta可以都写上！
2、web app应用下状态条（屏幕顶部条）颜色
除非先使用apple-mobile-web-app-capable指定全屏模式，否则这个meta标签不会起任何作用。
默认值为default（白色），可以定位black(黑色)和black-translucent(灰色半透明)。
若值为"black-translucent"将会占据页面px位置，浮在页面上方（会覆盖页面20px高度-iPhone4和iTouch4的Retina屏幕为40px）。
3、添加至主屏幕设置
Safari浏览器中点击添加至主屏幕按钮，会默认生成一个截图的图标，相当于浏览器创建了一个快捷方式。
添加至主屏幕后，桌面图片和启动画面的设置
桌面图标设置：
图片尺寸可以设定为5757（px）或者Retina可以定为114114（px），ipad尺寸为72*72（px)。
启动画面设置：
iOS下页面启动加载时显示的画面图片，避免加载时的白屏。
可以通过madia来指定不同的大小：
二、关于样式
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;
}
总结陆续更新···