移动端H5页面注意事

悠悠 2022-07-10 09:59 301阅读 0赞

转载自：http://www.jianshu.com/p/e95824e8fe13

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

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

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

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

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

> 如果页面已经写好了，就只能按照上面的尺寸进行内容的调整了，缩小元素间距，缩放图片大小等。  
> 分享下我的失败尝试：
> 
> 1.  如果对整个页面进行缩放（使用 meta 标签），按照设计稿的比例，在高度满足的情况下宽度会偏小，两边会有白底；
> 2.  就算使用 rem 作为相关间距的单位，也没有办法找到一个合适的比例在两种高度（微信/QQ）下切换，因此统一调成适配 QQ 的，这样就算在微信下有多余的空白，固定底部的引导下滑箭头也能使其不会过于突兀。

![1240][]

750\*1334 页面示例

## 2. 标题简短 ##

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

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

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

![1240 1][]

代码示例.png

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

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

![1240 2][]

QQ内的温馨提醒

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

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

## 5. 使用 Gulp 拼合图片 ##

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

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

## 6. 关于链接的分享-QQ ##

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

<title>QQ中链接的标题由此处获取</title>
    <meta name="description" content="QQ中链接的描述由此处获取">
    
    <meta itemprop="image" content="http://*.*.com/static/images/share.png" />

可参考 [手机QQ接口文档：setShareInfo][QQ_setShareInfo]。

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

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

## 7. 图片压缩 ##

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

> 在线的 [Tinypng][] 可以无限次使用，如果想要使用其 API 来进行压缩自动化的话，可以使用 [gulp-tinypng][] 等插件，但是有每月压缩图片数量限制，每月前500张图片免费，其他收费情况参考[官网][Link 2]说明。使用其 API 还需要获取 API Key，[这里][Link 2]可以获取。  
> 个人觉得想要免费的话使用 API 会有数量限制，时刻惦记着数量有点心累，不如直接使用在线工具，也不麻烦~

## 8. Loading ##

代码段分享，拿走即用~

## 9. CSS 动画属性前缀 webkit ##

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

-webkit-animation: f .8s 2s forwards ease-in-out; animation: f .8s 2s forwards ease-in-out; @-webkit-keyframes f { 0% { opacity: 0; -webkit-transform: translate3d(750px,0,0); transform: translate3d(750px,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } @keyframes f { 0% { opacity: 0; -webkit-transform: translate3d(750px,0,0); transform: translate3d(750px,0,0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } }

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

## 参考 ##

[途牛Q2财报][Q2]  
[2017年轻人花花花钱大报告][2017]

学习前端的过程中，我整理了很多资料，也希望能共享出来帮助到更多刚接触或者接触前端不久的同学。不过也为了把控微信群的质量，入群的一定要是前端的小伙伴才可以。入群我就会把资料发给每个人，每天也会挑选前沿的前端高质量文章发到群里给大家学习。想加入的同学可以加 **笑笑微信：iamaixiaoxiao**，拉你入群。再次强调，保证群高质量，群非前端不加，请谅解哦。扫描微信二维码也可以。

![Center][]

[1240]: /images/20220709/16bd505e670c4af6b1ac0dbd296d194b.png
[1240 1]: /images/20220709/ccf4ec40fdf04548ab0fae8a859182b3.png
[1240 2]: /images/20220709/c018b9b51ba043e5a25790d4f265bc58.png
[QQ_setShareInfo]: http://open.mobile.qq.com/api/mqq/index#api:setShareInfo
[gulp-imagemin]: https://www.npmjs.com/package/gulp-imagemin
[Link 1]: http://www.ydcss.com/archives/26
[Tinypng]: https://tinypng.com/
[gulp-tinypng]: https://github.com/creativeaura/gulp-tinypng
[Link 2]: https://tinypng.com/developers
[gulp-autoprefixer]: https://www.npmjs.com/package/gulp-autoprefixer
[Q2]: http://m.tuniu.com/topic/q2caibao/q2caibao.html?appinstall=0
[2017]: http://h5.flyfinger.com/feidee/report/index.html
[Center]: /images/20220709/82667e74a4b249b3a2e0f3d671666ccf.png