移动端H5活动页面常常须要能够分享到各种社交App中,常用的有 微信、QQ 等。

利用移动设备查看页面时会创造,在微信浏览器中有顶部导航栏,在qq内置浏览器里不止有 顶部导航,底部也有 操作栏(safari浏览器也一样),这些都会占用设计稿显示区域,因此在 设计环节 就须要考虑内容的多少,页面底部要 预留一定的空缺,这样在微信或qq中才不会被遮住(如果页面已经写好了,就只能按照上面的尺寸进行内容的调度了,缩小元素间距,缩放图片大小等)。

标题简短

移动端浏览器导航条宽度有限,简短的标题可以使其展示完全。

html5上下固定移动端 HTML5 页面留意事项 React

二维码图片利用 img 标签引入

二维码图片不要写为元素背景,不然长按没有办法触发扫描功能。
应利用 img 标签引入。

二维码图片记得扫描测试

有时候扫描二维码之后,会跳转至某个地址,不幸的话QQ或者微信会对这个地址进行温馨提醒,这样会阻挡部分用户连续访问,从而无法很好的将用户勾引到活动想要推广的产品/品牌页面,如 App 的下载页面等。
因此二维码的扫描测试不能少(举个例子,如果二维码扫描结果是运用的下载地址的话,可以利用运用宝的微下载地址来天生二维码,这是不会被“温馨提醒”的。
)。

利用 打包工具(比如gulp) 拼合图片

如果打算先布局,后利用自动化工具(如:gulp-sprite-generator2)将图片拼起来(即通过 css 天生精灵图),减少要求数,须要把稳:在编写 CSS 的时候,图片宽高应固定,图片拼合后才能通过定位和显示区域的宽高来展示图片。
建议先将图片拼起来再布局,可以利用:gulp.spritesmith,一步获取合并的精灵图和对应的 css 文件。

CSS 动画属性前缀 webkit

利用 CSS3 来制作动画效果的话,webkit 前缀一定记得加,要不然在某些手机下动画效果是没有的(可以利用自动化构建工具完成)。

欢迎各位童鞋补充哦!