手机端 HTML5 页面注意事项

  • 时间:2018-06-18 23:01 作者:星前线 来源:星前线 阅读:183
  • 扫一扫,手机访问
摘要:单个页面内容不可以过多设计常使用尺寸:750 x 1334 / 640 x 1134,包含了手机顶部信号栏的高度。手机端H5活动页面常常需要可以够分享到各种社交App中,常使用的有 微信、QQ 等。用移动设施查看页面时会发现,在微信浏览器中有顶部导航栏,在qq内置浏览器里不止有 顶部导航,底部也有

手机端 HTML5 页面注意事项

单个页面内容不可以过多

设计常使用尺寸:750 x 1334 / 640 x 1134,包含了手机顶部信号栏的高度。

手机端H5活动页面常常需要可以够分享到各种社交App中,常使用的有 微信、QQ 等。

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

标题简短

手机端浏览器导航条宽度有限,简短的标题能使其展现完整。

二维码图片用 img 标签引入

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

手机端 HTML5 页面注意事项

二维码图片记得扫描测试

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

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

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

CSS 动画属性前缀 webkit

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

欢迎各位童鞋补充哦!

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】学习web前端开发是正确的选择(2019-09-15 16:55)
【系统环境|】干货整理!零基础html5网站开发学习步骤方法(保存不后悔)(2019-09-10 16:27)
【系统环境|】「前端入门」前端基本概念(2019-09-07 21:36)
【系统环境|】小白入门学习web前端,这些干货不能少(2019-09-05 20:59)
【系统环境|】不是计算机专业,哪个专业更适合学习web前端(2019-09-03 20:31)
【系统环境|】入行web前端开发可以做什么工作(2019-09-02 20:51)
【系统环境|】什么是Web前端呢?为什么说web前端开发人员的薪资高、前景好呢?(2019-08-31 20:55)
【系统环境|】2019年Web前端开发的8个趋势,你知道几个?(2019-08-29 16:23)
【系统环境|】学习web前端,掌握这些,才有底气跟面试官提薪资(2019-08-28 15:23)
【系统环境|】Web前端为什么那么好(2019-08-27 18:20)
手机二维码手机访问领取大礼包
返回顶部