关键词：
1. 单个页面内容不能过多
设计常用尺寸：7501334 / 6401134，包含了手机顶部信号栏的高度。
移动端H5活动页面常常需要能够分享到各种社交App中，常用的有微信、QQ等。
使用移动设备查看页面时会发现，在微信浏览器中有顶部导航栏，在qq内置浏览器里不止有顶部导航，底部也有操作栏（safari浏览器也一样），这些都会占用设计稿显示区域，因此在 设计环节 就需要考虑内容的多少，页面底部要预留一定的空白，这样在微信或qq中才不会被遮住。
如下图（QQ内置浏览器）：页面设计尺寸为 7501334，顶部占用 150px，底部占用 110px，共占用了 260px，因此设计稿内容应控制在 1334-260=1074px 的高度内。编写代码时，使用 Chrome 浏览器模拟设备大小，将该尺寸（*7501074*）存下来，用于实时查看移动端页面效果。
如果页面已经写好了，就只能按照上面的尺寸进行内容的调整了，缩小元素间距，缩放图片大小等。
分享下我的失败尝试：
- 如果对整个页面进行缩放（使用 meta 标签），按照设计稿的比例，在高度满足的情况下宽度会偏小，两边会有白底；
- 就算使用 rem 作为相关间距的单位，也没有办法找到一个合适的比例在两种高度（微信/QQ）下切换，因此统一调成适配 QQ 的，这样就算在微信下有多余的空白，固定底部的引导下滑箭头也能使其不会过于突兀。
2. 标题简短
移动端浏览器导航条宽度有限，简短的标题可以使其展示完整。
3. 二维码图片使用 img 标签引入
二维码图片不要写为元素背景，不然长按没有办法触发扫描功能。应使用 img 标签引入，如下：
4. 二维码图片记得扫描测试
有时候扫描二维码之后，会跳转至某个地址，不幸的话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" />问题：即使使用了如上的 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。
移动端触屏也就h5页面左右滑动返回上一页？
移动端触屏也就H5页面左右滑动返回上一页？注意，本非在一个页面中的滑动翻页效果~！APP上能实现，不知道HTML上能不能实现呢？参考技术A原生的没有，可以使用插件jquerymobile或者zeptojs，都有滑动事件 查看详情
移动端h5页面设计
参考技术A1、为什么要做移动端H5页面？响应式页面为了适应不同的终端设备而产生，体验较好，可以自动识别屏幕宽度以改变布局形式。但是不是所有的网站都适合做成响应式，如淘宝等一些大型网站做响应式开发难度大，响... 查看详情
移动端或者移动端h5需要注意的一些事(代码片段)
1、移动端点击a标签出现的背景色a,a:hover,a:active,a:visited,a:link,a:focus-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;outline:none;2、对于超出div范围的内容进行省略号（...）显示 2.1、单行显示di 查看详情
基于rem的移动端响应式适配方案(详解)移动端h5页面的设计稿尺寸大小规范
基于rem的移动端响应式适配方案(详解)： https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.com/v/53039.html 查看详情
h5移动端禁止页面上下滚动
参考技术A当内容超过元素容器的高度时，滚动条就会出现，这是为了让超过内容也能显示设计。但有时候，我们不希望滚动条出现，我们就是想要超过容器部分不再显示，这时需要加一些命令，告诉浏览器我们的需要。 查看详情
h5移动端禁止页面左右滑动
...页面内部的某些元素超出了设备宽度之外，也会导致可以移动，这这属于css布局的问题。 查看详情
基于jquery的h5移动端抽奖页面插件
基于jQuery的H5移动端页面抽奖插件12宫格抽奖页面采用rem布局，亲测安卓机有效，用的是375px设计稿同时可以学习下jQuery插件的基本模板是怎么写的。案例下载地址：github上不了，晚点补充 直接上动态图： 项目结构：... 查看详情
移动端h5页面遮罩层
1.建一个遮罩层div<divid="cover"></div>2.设置遮罩层样式#coverposition:absolute;left:0px;top:0px;background:rgba(0,0,0,0.5);width:100%;/*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/height:100%;filter:alpha(opacity=100); 查看详情
h5移动端布局
在开始移动端布局前要先了解一下设备宽度，页面大小，浏览器视口三者之间的区别 设备宽度：实物设备的大小，设备的分辨率，具体数据是设备生产的厂家给的。 页面大小：设计稿上规定的页面的宽度和高度 浏览... 查看详情
移动端与h5页面像素的差异与关系(代码片段)
最近工作任务主要是移动端内嵌H5页面，一次与原生进行像素交互下，发现了这个天坑，再次做个记录??天坑如下： H5页面中的“像素”与移动端设备的“像素”系统不一致，对于刚接触这块的我，曾经几时... 查看详情
finereport中如何安装移动端h5插件
...插件的方法可以官网上面搜索，这里就不做详细介绍了。移动端HTML5报表使用方法安装好插件后，在浏览器中调用时，需要在报表路径后面加上参数op=h5。但是PC端不完全支持H5效果。移动端添加参数前后效果：fs上挂报表的时候... 查看详情
移动端h5页面编写样式重置(代码片段)
@charset"UTF-8";/*stylelint-enable*//*重置样式*/*-webkit-tap-highlight-color:transparent;outline:0;body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea 查看详情
h5移动端页面禁用长按选中文本
参考技术A此段css样式加入后能解决ios下手机浏览器，微信浏览器长按出现选择系统菜单问题，但是对于Android下微信浏览器还会出现不兼容问题。 查看详情
h5移动端页面根font-size设置
h5rem.js(function(doc,win){vardocEl=doc.documentElement,resizeEvt=‘orientationchange‘inwindow?‘orientationchange‘:‘resize‘,//pieces=750,recalc=function(){varclientWidth=docEl.clientWidth;if(!clientWid 查看详情
h5移动端页面设计心得分享
去年JDC出了不少优秀的武媚娘…不，H5呢，大家都很拼，同时当然也积累了一些经验和教训，今天结合咱们的实战案例，从字体，排版，动效，音效，适配性，想法这几个方面好好聊一聊关于H5的设计，希望对同学们有帮助。... 查看详情
移动端jd首页h5页面
1：理解View：<metaname="viewport"content="width=device-width,initial-scale=1.0">2.自适应宽度：width:100%,max-width:640px,min-width:320px3.单位：我们可以用px也可以rem。4.图片自适应：display：blockmax-width：100%5.样式统一：normal. 查看详情
移动端h5页面编辑器开发实战--原理结构篇
...前言在去年10月份左右，接到了需求：开发一个H5移动端页面编辑器的任务，目的主要是解放公司内在制作这类网页的所投入的人力以及解决使用外部H5编辑器所涉及到的版权问题。因此，一款能够与市面上已经成... 查看详情
移动端h5页面的设计稿尺寸大小规范
...（当然包含微信端的H5网页设计），如果没有做过类似的移动端的设计，UI设计师和前端工程师肯定会纠结的。如果是app设计师，就不会那么纠结啦。那么多手机屏幕尺寸，设计稿应该按照哪一个尺寸作为标准尺寸。现在已经有2K... 查看详情