【怎样做网络推广】创作移动H5页面时应注意哪些问题呢？

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

我们在创作移动H5页面时应注意哪些问题呢？

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

设计常用尺寸：7501334/6401134，包含了手机顶部信号栏的高度。
移动端H5活动页面常常需要能够分享到各种社交App中，常用的有微信、QQ等。
使用移动设备查看页面时会发现，在微信浏览器中有顶部导航栏，在qq内置浏览器里不止有顶部导航，底部也有操作栏（safari浏览器也一样），这些都会占用设计稿显示区域，因此在设计环节就需要考虑内容的多少，页面底部要预留一定的空白，这样在微信或qq中才不会被遮住。
如下图（QQ内置浏览器）：页面设计尺寸为7501334，顶部占用150px，底部占用110px，共占用了260px，因此设计稿内容应控制在1334-260=1074px的高度内。编写代码时，使用Chrome浏览器模拟设备大小，将该尺寸（*7501074*）存下来，用于实时查看移动端页面效果。
如果页面已经写好了，就只能按照上面的尺寸进行内容的调整了，缩小元素间距，缩放图片大小等。
2.标题简短
移动端浏览器导航条宽度有限，简短的标题可以使其展示完整。
3.二维码图片使用img标签引入
二维码图片不要写为元素背景，不然长按没有办法触发扫描功能。
4.二维码图片记得扫描测试
有时候扫描二维码之后，会跳转至某个地址，不幸的话QQ或者微信会对这个地址进行温馨提醒。
这样会阻止部分用户继续访问，从而无法很好的将用户引导到活动想要推广的产品/品牌页面，如App的下载页面等。因此二维码的扫描测试不能少。
举个例子，如果二维码扫描结果是应用的下载地址的话，可以使用应用宝的微下载地址来生成二维码，这是不会被“温馨提醒”的。
5.使用Gulp拼合图片
如果打算先布局，后使用自动化工具将图片拼起来，减少请求数，需要注意：在编写CSS的时候，图片宽高应固定，图片拼合后才能通过定位和显示区域的宽高来展示图片。
举个例子，如果布局时width:100%;background-position:center;使用工具拼合图片后，该元素区域（100%的宽度）内会将其他图片显示出来，这不是我们想要看到的。
6.关于链接的分享-QQ
如果将页面链接直接复制分享给其他人，在手机上接收链接消息的用户可能会看到链接的相关信息，如页面标题、描述和图片。相关信息设置方式如下：
QQ中链接的标题由此处获取
*.*.com/static/images/share.png"/>
可参考手机QQ接口文档：setShareInfo。
问题：即使使用了如上的image设置方法，还是没能显示预期图片？
解决：确定下你发送的链接格式，会不会有所省略，如：somedomain/或者somedomain/index，正确的应为somedomain/index.html，才能正确解析到图片。
如果是打开链接后，在QQ内置浏览器里选择将页面分享出去，那一般不会出错。
7.CSS动画属性前缀webkit
使用CSS3来制作动画效果的话，webkit前缀一定记得加，要不然在某些手机下动画效果是没有的。
如下：
-webkit-animation:f.8s2sforwardsease-in-out;
animation:f.8s2sforwardsease-in-out;

@-webkit-keyframesf{
0%{
opacity:0;
-webkit-transform:translate3d(750px,0,0);
transform:translate3d(750px,0,0)
}

to{
opacity:1;
-webkit-transform:translateZ(0);
transform:translateZ(0)
}
}

@keyframesf{
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。
8.图片压缩
使用自动化工具gulp-imagemin（教程）来压缩图片，效果举例：101KB=>80.7KB。后来我使用了在线工具Tinypng又进行了一次压缩，效果举例：（上面使用gulp-imagemin压缩过的图片）80.7KB=>38.1KB，可见光使用自动化工具来压缩是不够的，大部分图片仍存在较大的压缩空间，可以再扔到Tinypng里压缩一下看看。
在线的Tinypng可以无限次使用，如果想要使用其API来进行压缩自动化的话，可以使用gulp-tinypng等插件，但是有每月压缩图片数量限制，每月前500张图片免费，其他收费情况参考官网说明。使用其API还需要获取APIKey，这里可以获取。
个人觉得想要免费的话使用API会有数量限制，时刻惦记着数量有点心累，不如直接使用在线工具，也不麻烦~
9.Loading
代码段分享，拿走即用~
functionloading(){

functionLoad(){}

Load.prototype.loadImgs=function(urls,callback){
this.urls=urls;
this.imgNumbers=urls.length;
this.loadImgNumbers=0;
varthat=this;
for(vari=0;i