移动端H5页面注意事项
1. 单个页面内容不能过多
设计常用尺寸：750 x 1334 / 640 x 1134，包含了手机顶部信号栏的高度。
移动端H5活动页面常常需要能够分享到各种社交App中，常用的有 微信、QQ 等。
使用移动设备查看页面时会发现，在微信浏览器中有顶部导航栏，在qq内置浏览器里不止有 顶部导航，底部也有 操作栏（safari浏览器也一样），这些都会占用设计稿显示区域，因此在 设计环节 就需要考虑内容的多少，页面底部要 预留一定的空白，这样在微信或qq中才不会被遮住。
如下图（QQ内置浏览器）：页面设计尺寸为 750 x 1334，顶部占用 150px，底部占用 110px，共占用了 260px，因此设计稿内容应控制在 1334-260=1074px 的高度内。编写代码时，使用 Chrome 浏览器模拟设备大小，将该尺寸（7501074*）存下来，用于实时查看移动端页面效果。
如果页面已经写好了，就只能按照上面的尺寸进行内容的调整了，缩小元素间距，缩放图片大小等。
分享下我的失败尝试：
如果对整个页面进行缩放（使用 meta 标签），按照设计稿的比例，在高度满足的情况下宽度会偏小，两边会有白底；
就算使用 rem 作为相关间距的单位，也没有办法找到一个合适的比例在两种高度（微信/QQ）下切换，因此统一调成适配 QQ 的，这样就算在微信下有多余的空白，固定底部的引导下滑箭头也能使其不会过于突兀。
750*1334 页面示例
2. 标题简短
移动端浏览器导航条宽度有限，简短的标题可以使其展示完整。
3. 二维码图片使用 img 标签引入
二维码图片不要写为元素背景，不然长按没有办法触发扫描功能。应使用 img 标签引入，如下：
代码示例.png
4. 二维码图片记得扫描测试
有时候扫描二维码之后，会跳转至某个地址，不幸的话QQ或者微信会对这个地址进行温馨提醒，如下图所示：
QQ内的温馨提醒
这样会阻止部分用户继续访问，从而无法很好的将用户引导到活动想要推广的产品/品牌页面，如 App 的下载页面等。因此二维码的扫描测试不能少。
举个例子，如果二维码扫描结果是应用的下载地址的话，可以使用应用宝的微下载地址来生成二维码，这是不会被“温馨提醒”的。
5. 使用 Gulp 拼合图片
如果打算先布局，后使用自动化工具（如：gulp-sprite-generator2）将图片拼起来（即通过 css 生成精灵图），减少请求数，需要注意：在编写 CSS 的时候，图片宽高应固定，图片拼合后才能通过定位和显示区域的宽高来展示图片。
举个例子，如果布局时
width: 100%; background-position: center;，使用工具拼合图片后，该元素区域（100% 的宽度）内会将其他图片显示出来，这不是我们想要看到的。
建议先将图片拼起来再布局，可以使用：gulp.spritesmith，一步获取合并的精灵图和对应的 css 文件。
2017-11-25 更新：推荐一个自制的 Electron 客户端工具 Splice（集合了常用的 gulp 插件，包括上述的两种精灵图生成插件）。
补充两个关于使用精灵图的问题：
将多张图片通过工具生成精灵图和 css 文件：
如果你生成精灵图时不小心使用了重复的图片（文件夹里存在重复的图片不同的名字），在手机上会出现图片大小位置都出错的情况，虽然电脑浏览器（Chrome）里正常。
解决：去掉那张重复的图片重新生成一次精灵图和 css 就好了。直接通过 css 文件生成精灵图：
制作手机端的活动页面时，经常需要翻页的效果，可以的话最好每个页面的图片拼成一张精灵图（工具提供正则筛选图片路径的功能）。尽量不要将所有页面的图片统一拼成一张，如果你拼完没问题也就算了，但是我这边遇到过同上面第一点一样的问题，手机上页面效果出错。
解决：最后排查不出问题，通过将多个页面的图片分成三张精灵图才勉强度过难关。
6. 关于链接的分享-QQ
如果将页面链接直接复制分享给其他人，在手机上接收链接消息的用户可能会看到链接的相关信息，如页面标题、描述和图片。相关信息设置方式如下：
<title>QQ中链接的标题由此处获取</title><meta name="description" content="QQ中链接的描述由此处获取"><!-- QQ默认获取的图片有可能出现缩放问题，效果不佳，可以通过如下方法进行设置 --><meta itemprop="image" content="http://*.*.com/static/images/share.png" />
问题：即使使用了如上的 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 里压缩一下看看。
在线的 Tinypng 可以无限次使用，如果想要使用其 API 来进行压缩自动化的话，可以使用 gulp-tinypng 等插件，但是有每月压缩图片数量限制，每月前500张图片免费，其他收费情况参考官网说明。使用其 API 还需要获取 API Key，这里可以获取。
个人觉得想要免费的话使用 API 会有数量限制，时刻惦记着数量有点心累，不如直接使用在线工具，也不麻烦~
8. Loading
首屏 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。
10. Swiper.js & Animate.css
你只需要 Swiper.js 和 Animate.css 即可打造（简单的）移动端 H5 活动页面~
Swiper 是纯 javascript 打造的滑动特效插件，面向手机、平板电脑等移动终端。
Animate.css 是纯 CSS 编写而成的动画库，包含多种常见的 CSS 动画。
引用 Swiper.js，同时在 Animate.css 中寻找需要的动画效果复制粘贴进 css 文件即可，完全不必引用 Animate.css。
11. 使用 Meta 标签进行页面缩放
<!-- 以下代码默认设计稿尺寸为 640 x 1134 --><meta id="viewport" content="width=device-width, user-scalable=yes,initial-scale=1" name="viewport" /><script>
var detectBrowser = function(name) { if(navigator.userAgent.toLowerCase().indexOf(name) > -1) { return true;
} else { return false;
}
}; var width = parseInt(window.screen.width); var scale = width/640; // 根据设计稿尺寸进行相应修改：640=>?
var userScalable = 'no'; if(detectBrowser("qq/")) userScalable = 'yes'; document.getElementById('viewport').setAttribute( 'content', 'target-densitydpi=device-dpi,width=640,user-scalable='+userScalable+',initial-scale=' + scale); // 这里也别忘了改：640=>?</script>利用 meta 标签对页面进行缩放，使得我们可以直接根据设计稿来进行页面的编写，不用再进行单位的换算等等，省却了很多麻烦。
12. 微信二维码问题
01：同一个页面里要是有两个二维码，长按扫描总是只能扫出 左侧/第一个 二维码。
解决：可视区域内只能出现一个二维码。
02：使用 meta 标签缩放页面后长按二维码图片无反应。
解决：使用了以下代码之后，就能长按识别二维码了~
<!--同一张二维码图片--><!--下面这张 opacity 为 0，隐藏起来，但是实际存在，并且宽为 100%，屏幕有多大就多大-->< img style="right:0; top:0; height: auto;width: 100%;opacity: 0;position: absolute;" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="二维码图片地址"><!--下面这张是呈现给用户看的-->< img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="二维码图片地址" title="qrcode" alt="qrcode"><!--PS: img 标签前面的空格记得去掉，这里加上空格是因为简书有 bug，针对 img 标签代码渲染会出错-->
参考
作者：Alexee
链接：https://www.jianshu.com/p/e95824e8fe13
共同学习，写下你的评论
评论加载中...
作者其他优质文章
