首发于简书博客：http://www.jianshu.com/p/e958...2017-11-25更新：5.使用Gulp拼图1.内容a单页不能太多设计的常用尺寸：750x1334/640x1134，包括手机顶部信号栏的高度。手机H5活动页往往需要能够分享到各种社交APP，比如微信、QQ等。当你使用移动设备查看页面时，你会发现微信浏览器中有一个顶部导航栏，而QQ内置浏览器中不仅有顶部导航栏，底部还有一个操作栏（Safari浏览器也是如此），会占用设计稿的展示区域。因此在设计过程中需要考虑内容量，在页面底部预留一定的空白，以免被微信或QQ覆盖。如下图（QQ内置浏览器）：页面设计尺寸为750x1334，顶部占150px，底部占110px，共占260px，所以设计稿的内容要控制在高度以内1334-260=1074像素。写代码时，使用Chrome浏览器模拟设备尺寸，保存尺寸（750*1074），用于实时查看手机页面效果。如果页面已经写好，只能按照上面的大小调整内容，缩小元素间距，缩放图片大小。分享我失败的尝试：如果整个页面缩放（使用meta标签），按照设计稿的比例，满足高度后宽度会偏小，两边会出现白底；即使以rem作为相关间距的单位，也没有办法找到合适的比例来切换两种高度（微信/QQ），所以统一调整适配QQ，这样即使有微信下多出来的空白，底部的引导向下箭头也能让它不至于太突兀。2.标题短。手机浏览器导航栏的宽度是有限的，一个简短的标题可以让展示更完整。3、使用二维码图片的img标签引入二维码图片，不要写成元素的背景，否则无法通过长按触发扫描功能。需要使用img标签导入，如下：4.记得扫描二维码图片进行测试。有时扫描二维码后，会跳转到某个地址。如果不幸，QQ或微信会对该地址进行温馨提示，如下图：这样会阻止部分用户继续访问，从而无法很好的将用户引导至活动发生的产品/品牌页面想要推广，比如app下载页面。因此，二维码的扫描测试是必不可少的。比如二维码扫描结果为应用下载地址，则可以使用应用宝微下载地址生成二维码，不会被“温馨提示”。5.使用Gulp拼图如果打算先布局，然后使用自动化工具（如：gulp-sprite-generator2）拼图（即通过css生成sprite图片）减少请求次数，需要注意：在写CSS时，图片的宽高要固定，图片拼接后通过定位显示区域的宽高就可以展示图片。例如，如果宽度：100%；背景位置：中心；用于布局，使用工具将图片拼接在一起后，其他图片会显示在元素区域（100%宽度），这不是我们想看到的。建议先把图片放在一起再排。可以使用：gulp.spritesmith一步获取合并后的精灵贴图和对应的css文件。2017-11-25更新：推荐一个自制的Electron客户端工具Splice（常用的gulp插件合集，包含以上两个sprite生成插件）。补充两个关于使用精灵的问题：1.使用工具将多张图片生成精灵和css文件：如果生成精灵时不小心用到了重复的图片（文件夹中有重复的不同名称的图片），图片的大小和位置在手机上会报错，在电脑浏览器（Chrome）下正常。解决方法：去掉重复图片，重新生成sprite图片和css。2、直接通过css文件生成精灵：在手机端制作活动页面时，经常需要翻页。如果可能的话，最好将每个页面的图片组合成一个sprite（工具提供了定时过滤图片路径的功能）。尽量不要将所有页面的图片合并为一张。如果你没有任何问题地完成拼写，那很好。但是我遇到了和上面第一点一样的问题，手机端页面效果不对。解决方案：最后没发现问题，将多个页面的图片分成三个精灵才勉强攻克难关。6、关于链接分享——如果QQ直接复制页面链接分享给他人，手机端收到链接消息的用户可能会看到该链接的相关信息，如页面标题、描述、图片等。相关信息设置如下：
