完整的HTML模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telphone=no, email=no" />
<title>标题</title>
</head>
<body>
这里开始内容
</body>
</html>CSS
CSS reset
html{
-webkit-tap-highlight-color: rgba(0,0,0,0); /*去掉触摸遮盖层*/
-webkit-user-modify: read-write-plaintext-only;
-webkit-user-select: none; /*禁止用户选择文字*/
}
/*设置所有盒子大小计算边框内*/
*,
*:before,
*:after {
box-sizing: border-box;
}
/*消除输入框的阴影和边框*/
input,textarea, select{
-webkit-appearance: none; /*去掉webkit默认的表单样式*/
appearance: none;
outline: none;
border: none;
}消除transition动画闪屏
.animate {
-webkit-transform-style: preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-backface-visibility: hidden; /*设置进行转换的元素的背面在面对用户时是否可见：隐藏*/
}开启硬件加速
解决页面闪白，保证动画流畅。
.css {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}其它
关于打电话、发短信、发邮件的实现
<a href="tel:10086">打电话给：10086</a>
<a href="sms:10086">发短信给：10086</a>
<a href="mailto:xxxx@gmail.com">发邮件给：xxxx</a>
