html5移动web开发总结报告,移动Web开发小结

在做移动 Web 开发时有很多地方跟 PC 端是不一样的，需要不一样的设置，这里就记录下移动 Web 开发中有用的设置和一些通用代码。

HTML

设置页面宽度等于设备宽度，并禁止用户缩放页面

忽略页面中的数字识别为电话，忽略email识别

开启对web app程序的支持(仅针对IOS系统)

网站开启对web app程序的支持，其实意思就是删除默认的苹果工具栏和菜单栏，开启全屏显示

改变顶部状态条的颜色(仅针对IOS系统)

在 web app 下状态条(屏幕顶部条)的颜色默认值为 default(白色)，可以定为 black(黑色)和 black-translucent(灰色半透明)；

完整的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

发邮件给：zhangxy_92@outlook.com

关于布局

移动端中对于flexbox的支持已经很好，flexbox是布局神器。阮一峰老师写过flexbox 入门教程；以后自己可能也会写一篇flexbox的学习和总结笔记。