移动端H5页面注意事项

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 标签引入，以下：

![](images/qrcode.png)

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

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

QQ内的舒适提醒

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

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

5. 使用 Gulp 拼合图片

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

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

6. 关于连接的分享-QQ

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

<title>QQ中连接的标题由此处获取</title> <meta name="description" content="QQ中连接的描述由此处获取"> <!-- QQ默认获取的图片有可能出现缩放问题，效果不佳，能够经过以下方法进行设置 --> <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

代码段分享，拿走即用~

function loading(){ function Load(){} Load.prototype.loadImgs = function(urls,callback) { this.urls = urls; this.imgNumbers = urls.length; this.loadImgNumbers = 0; var that =this; for(var i=0;i<urls.length;i++){ var obj = new Image(); obj.src = urls[i]; obj.onload = function(){ that.loadImgNumbers++; callback(parseInt((that.loadImgNumbers/that.imgNumbers)*100)); } } }; var loader = new Load(); loader.loadImgs([ // 将全部须要加载的图片地址写于此处 "http://domain/site/dist/img/XX.png", "http://domain/site/dist/img/XX.png", "http://domain/site/dist/img/XX.png", "http://domain/site/dist/img/XX.png", "http://domain/site/dist/img/XX.png", "http://domain/site/dist/img/XX.png", "http://domain/site/dist/img/XX.png" ],function(percent){ // 假设显示百分比的元素为 $(".percent") $(".percent").text(percent+'%'); // 加载结束后，隐藏相应的 loading 或遮罩 if(percent==100) { $(".mask").css('display','none'); } }); } // 执行 loading 方法 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。