1. 单个页面内容不能过多

设计常用尺寸:7501334 / 6401134,包含了手机顶部信号栏的高度。

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

使用移动设备查看页面时会发现,在微信浏览器中有顶部导航栏,在qq内置浏览器里不止有顶部导航,底部也有操作栏(safari浏览器也一样),这些都会占用设计稿显示区域,因此在 设计环节 就需要考虑内容的多少,页面底部要预留一定的空白,这样在微信或qq中才不会被遮住。

如下图(QQ内置浏览器):页面设计尺寸为 7501334,顶部占用 150px,底部占用 110px,共占用了 260px,因此设计稿内容应控制在 1334-260=1074px 的高度内。编写代码时,使用 Chrome 浏览器模拟设备大小,将该尺寸(*7501074*)存下来,用于实时查看移动端页面效果。

如果页面已经写好了,就只能按照上面的尺寸进行内容的调整了,缩小元素间距,缩放图片大小等。
分享下我的失败尝试:

  1. 如果对整个页面进行缩放(使用 meta 标签),按照设计稿的比例,在高度满足的情况下宽度会偏小,两边会有白底;
  2. 就算使用 rem 作为相关间距的单位,也没有办法找到一个合适的比例在两种高度(微信/QQ)下切换,因此统一调成适配 QQ 的,这样就算在微信下有多余的空白,固定底部的引导下滑箭头也能使其不会过于突兀。

750*1334 页面示例

2. 标题简短

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

3. 二维码图片使用 img 标签引入

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

  1. ![](images/qrcode.png)

4. 二维码图片记得扫描测试

有时候扫描二维码之后,会跳转至某个地址,不幸的话QQ或者微信会对这个地址进行温馨提醒,如下图所示:

QQ内的温馨提醒

这样会阻止部分用户继续访问,从而无法很好的将用户引导到活动想要推广的产品/品牌页面,如 App 的下载页面等。因此二维码的扫描测试不能少。

举个例子,如果二维码扫描结果是应用的下载地址的话,可以使用应用宝的微下载地址来生成二维码,这是不会被“温馨提醒”的。

5. 使用 Gulp 拼合图片

如果打算先布局,后使用自动化工具将图片拼起来,减少请求数,需要注意:在编写 CSS 的时候,图片宽高应固定,图片拼合后才能通过定位和显示区域的宽高来展示图片。

举个例子,如果布局时 width: 100%; background-position: center;,使用工具拼合图片后,该元素区域(100% 的宽度)内会将其他图片显示出来,这不是我们想要看到的。

6. 关于链接的分享-QQ

如果将页面链接直接复制分享给其他人,在手机上接收链接消息的用户可能会看到链接的相关信息,如页面标题、描述和图片。相关信息设置方式如下:

  1. <title>QQ中链接的标题由此处获取</title>
  2. <meta name="description" content="QQ中链接的描述由此处获取">
  3. <!-- QQ默认获取的图片有可能出现缩放问题,效果不佳,可以通过如下方法进行设置 -->
  4. <meta itemprop="image" content="http://*.*.com/static/images/share.png" />

可参考 手机QQ接口文档:setShareInfo

问题:即使使用了如上的 image 设置方法,还是没能显示预期图片?
解决:确定下你发送的链接格式,会不会有所省略,如:somedomain/ 或者 somedomain/index,正确的应为 somedomain/index.html,才能正确解析到图片。

如果是打开链接后,在QQ内置浏览器里选择将页面分享出去,那一般不会出错。

7. 图片压缩

使用自动化工具 gulp-imagemin教程) 来压缩图片,效果举例:101 KB => 80.7 KB。后来我使用了在线工具 Tinypng 又进行了一次压缩,效果举例:(上面使用 gulp-imagemin 压缩过的图片)80.7 KB => 38.1 KB,可见光使用自动化工具来压缩是不够的,大部分图片仍存在较大的压缩空间,可以再扔到 Tinypng 里压缩一下看看。

8. Loading

代码段分享,拿走即用~

  1. function loading(){
  2. function Load(){}
  3. Load.prototype.loadImgs = function(urls,callback) {
  4. this.urls = urls;
  5. this.imgNumbers = urls.length;
  6. this.loadImgNumbers = 0;
  7. var that =this;
  8. for(var i=0;i<urls.length;i++){
  9. var obj = new Image();
  10. obj.src = urls[i];
  11. obj.onload = function(){
  12. that.loadImgNumbers++;
  13. callback(parseInt((that.loadImgNumbers/that.imgNumbers)*100));
  14. }
  15. }
  16. };
  17. var loader = new Load();
  18. loader.loadImgs([
  19. // 将所有需要加载的图片地址写于此处
  20. "http://domain/site/dist/img/XX.png",
  21. "http://domain/site/dist/img/XX.png",
  22. "http://domain/site/dist/img/XX.png",
  23. "http://domain/site/dist/img/XX.png",
  24. "http://domain/site/dist/img/XX.png",
  25. "http://domain/site/dist/img/XX.png",
  26. "http://domain/site/dist/img/XX.png"
  27. ],function(percent){
  28. // 假设显示百分比的元素为 $(".percent")
  29. $(".percent").text(percent+'%');
  30. // 加载结束后,隐藏相应的 loading 或遮罩
  31. if(percent==100) {
  32. $(".mask").css('display','none');
  33. }
  34. });
  35. }
  36. // 执行 loading 方法
  37. loading();

9. CSS 动画属性前缀 webkit

使用 CSS3 来制作动画效果的话,webkit 前缀一定记得加,要不然在某些手机下动画效果是没有的。
如下:

  1. -webkit-animation: f .8s 2s forwards ease-in-out;
  2. animation: f .8s 2s forwards ease-in-out;
  3. @-webkit-keyframes f {
  4. 0% {
  5. opacity: 0;
  6. -webkit-transform: translate3d(750px,0,0);
  7. transform: translate3d(750px,0,0)
  8. }
  9. to {
  10. opacity: 1;
  11. -webkit-transform: translateZ(0);
  12. transform: translateZ(0)
  13. }
  14. }
  15. @keyframes f {
  16. 0% {
  17. opacity: 0;
  18. -webkit-transform: translate3d(750px,0,0);
  19. transform: translate3d(750px,0,0)
  20. }
  21. to {
  22. opacity: 1;
  23. -webkit-transform: translateZ(0);
  24. transform: translateZ(0)
  25. }
  26. }

推荐使用自动化工具来处理未加前缀的 CSS 文件,如 gulp-autoprefixer

移动端H5页面注意事项的更多相关文章

  1. 移动端 H5 页面注意事项

    1. 单个页面内容不能过多 设计常用尺寸:750 x 1334 / 640 x 1134,包含了手机顶部信号栏的高度. 移动端H5活动页面常常需要能够分享到各种社交App中,常用的有 微信.QQ 等. ...

  2. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  3. 移动端H5页面的设计稿尺寸大小规范-转载自http://www.chinaz.com/design/2015/1103/465670.shtml

    机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计.显然不是. 请注意:(以下所有讨论内容和规范均将viewport设定为c ...

  4. [转]:移动端H5页面高清多屏适配方案

    原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...

  5. 移动端h5页面的设计稿尺寸

    当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最 ...

  6. 教你如何用 lib-flexible 实现移动端H5页面适配

    前话 好久没写教程了(可能会误导新手的菜鸟教程( ̄▽ ̄)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...

  7. 移动端H5页面惯性滑动监听

    移动端H5页面惯性滑动监听 在移动端,当你快速滑动有滚动条的页面时,当你手指离开屏幕时,滚动条并不会立即停止,而是会随着"惯性"继续滑动一段距离. 在做项目的过程中,需要监听惯性滑 ...

  8. vue移动端h5页面根据屏幕适配的四种方案

    最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...

  9. 解惑好文:移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

随机推荐

  1. 「BZOJ 3280」小R的烦恼

    题目链接 戳我 \(Solution\) 这道题很像餐巾计划啊. 首先将每天拆成\(x\)和\(x'\),\(S->x\)流量为\(a_i\),费用为\(0\)表示一天下来有\(a_i\)个濒死 ...

  2. 十二、Nodejs 包与 NPM 第三方模块安装 package.json 以及 CNPM

    1. 包 Nodejs 中除了它自己提供的核心模块外,我们可以自定义模块,也可以使用第三方的模块.Nodejs 中第三方模块由包组成,可以通过包来对一组具有相互依赖关系的模块进行统一管理. 在 Nod ...

  3. kali linux之xss

    攻击web客户端 客户端脚本语言(弹窗,广告,在浏览器中执行,javascript) javascript--与java语言无关,使用最广的客户端脚本语言 xss(cross-site scripti ...

  4. 【bzoj4987】Tree 树形dp

    Description 从前有棵树. 找出K个点A1,A2,-,Ak. 使得∑dis(AiAi+1),(1<=i<=K-1)最小. Input 第一行两个正整数n,k,表示数的顶点数和需要 ...

  5. luoguP4234 最小差值生成树

    https://www.luogu.org/problemnew/show/P4234 按照边的权值从小到大排序,依次加入,并删除能够删除的权值最小的一条边,用 set 维护当前所有边的边权,并查集维 ...

  6. 如何离线Windows server 2008R2 激活教程?

    服务器离线激活,可是费了老大劲了,不过最后还不是离线激活,还必须联网,也或许你运气好,不联网也能激活. 如果由于种种原因不能有线的话,那就可以试试这种方法了. 1.首先,开启无线LAN服务.(不会开启 ...

  7. SDUT OJ 顺序表应用5:有序顺序表归并

    顺序表应用5:有序顺序表归并 Time Limit: 100 ms Memory Limit: 880 KiB Submit Statistic Discuss Problem Description ...

  8. 富文本的一般处理方式,document.getElementById('富文本的ID').contentWindow.document.body.innerHTML = '%s'" %(content)

    如果套不出来,去问前端开发帮忙吧 哈哈

  9. 阻止datagrid填充已经获取到的远程数据

    时光流逝,弹指挥间,不经意的一年又如路上一个动人的靓影悄然消失在视线里.我们往往都是先问自己,我们收获了什么,然后才想到我们付出了什么,很少有人先问自己这一年付出了什么,然后再去看所得.话不多说了,祝 ...

  10. xml转换csv

    /// <summary> /// xml文件转换为CSV /// </summary> /// <param name="fileName"> ...