移动Web开发总结

完整的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);
}

其它

关于打电话、发短信、发邮件的实现

打电话给：10086
发短信给：10086
发邮件给：xxxx