移动端Web开发注意事项（响应式）
单页webapp应用开发（SPA架构）：http://my.oschina.net/maomi/blog/183790?p=1#OSC_h4_15 移动端页面开发资源总结：http://www.imooc.com/article/1542 Zepto使用注意事项：http://www.cnblogs.com/samwu/archive/2013/06/06/3121649.html 移动端下拉刷新插件：http://www.cnblogs.com/duanhuajian/archive/2013/04/08/3008323.html https://github.com/ximan/dropload 移动webapp触摸滑动最优解决方案：http://be-fe.github.io/iSlider/#demo http://www.swiper.com.cn/ 移动端的fullPage.js：https://github.com/yanhaijing/zepto.fullpage 适应手机端的jQuery图片滑块动画：http://www.html5cn.org/article-7151-1.html 移动端自适应图片大小：http://www.w3cplus.com/css/flexible-images.html 通过padding-bottom或者padding-top实现等比缩放响应式图片：http://www.cnblogs.com/websalon/p/3602324.html 纯CSS解决移动端自适应组件：http://www.alloyteam.com/2016/01/let-see-css-world/ 模块、图片、背景图片、视频等响应式(宽高等比缩放)布局：http://ons.me/493.html 移动端Web开发调试之Chrome远程调试：http://blog.csdn.net/freshlover/article/details/4252864 head标签部分添加以下代码：
第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
第四个meta标签表示：告诉设备不识别邮件和忽略将页面中的数字识别为电话号码 常见问题： 1.移动端建议用硬件加速的属性，而不是直接用margin。（transition移动一个div，margin会卡顿） 2.IE8或者更老的浏览器不支持媒体查询。你可以使用media-queries.js或者respond.js来在IE中添加对媒体查询的支持。 3.大部分4.7-5寸设备的viewport宽设为360px；5.5寸设备设为400px；iphone6设为375px；ipone6 plus设为414px。 4.viewport：能优化移动浏览器的显示。如果不是响应式网站，不要使用initial-scale或者禁用缩放。 5.虽然移动端不用写:hover，但光写个:active是不够的。实测Android 2.3下按过的按钮会留下浏览器默认颜色，所以记得给:visited也加个颜色。 6.遇到写动画animation的时候，不要用到伪类上。不然Android是没效果的。 7.用Flexbox做等分时，记得给宽度。不然Android里如果内容字数不一样，会撑开。 8.在ios的safari，click的捕获被认为和滚屏、点击输入框弹起键盘等一样，是一种浏览器默认行为，即可以被event.preventDefault()阻止的行为。 9.position:fixed在手机里面兼容性不是很好，尤其是在UC里面，如果要求比较高的话，老老实实用JS写吧。 10.-webkit-tap-highlight-color: 这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。想要禁用这个高亮，设置颜色的alpha值为0即可，即rgba(0,0,0,0)。 11.让html中的文本不可选，禁用长按图片弹出保存的菜单： img{-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} 12.开发中常用自定义滚动条效果：::-webkit-scrollbar:{width:8px;height:8px;}//血槽宽度 ::-webkit-scrollbar-thumb{border-raidus:3px;}//拖动条 ::-webkit-scrollbar-track{border-radius:6px;}//背景槽 IOS原生滚动回调效果：-webkit-overflow-scrolling:touch; 13.HTML+JS完成触屏动作的识别：http://bbs.html5cn.org/thread-84163-1-1.html 14.为了避免fixed在IOS上显示错位的问题，布局可以采用 page{position:absolute;left:0;right:0;top:0;bottom:0;}绝对定位首先于父级，page要想拉伸，需要加上html,body{height:100%;} 15.在用户输入号码的表单中，需要禁止用户输入中文、符号等，减少用户输入出错误的可能性,
于是在全局样式中定义如下：
.ime-disabled{ime-mode:disabled;}/* 屏蔽输入法 */
在页面定义如下：
16.使得外层元素内容（包括图片）居中： 外层元素{ position: absolute; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; } 或 外层元素{ display: table-cell; vertical-align: middle; } 17.解决字形图标在低端手机上不显示的问题，只需调整一下src地址的顺序即可： @font-face {
font-family: "iconfont";
src: url('icons.eot?ixsnn2');
src: url('icons.svg?ixsnn2#icomoon') format('svg'),
url('icons.eot?#iefixixsnn2') format('embedded-opentype'),
url('icons.ttf?ixsnn2') format('truetype'),
url('icons.woff?ixsnn2') format('woff'); url('icons.woff2?ixsnn2') format('woff2');
} 18.尽可能使用CSS动画，很多的CSS动画是用GPU处理的，因此动画本身很流畅，CSS动画比起JavaScript驱动的动画效率更高
.myAnimation {
animation: someAnimation 1s;
transform: translate3d(0, 0, 0); /* 强制硬件加速 */
}
注：使用3D硬件加速提升动画性能时，最好给元素增加一个z-index属性，人为干扰复合层的排序，可以有效减少chrome创建不必要的复合层，提升渲染性能，移动端优化效果尤为明显。
19.移动端制作遇到的坑：http://caibaojian.com/mobile-web-app-fix.html
20.移动端Fixed布局的解决方案：http://caibaojian.com/mobile-position-fixed.html?wb
21.HTML5 项目常见问题及注意事项：http://orangexc.xyz/2016/07/30/Common-problems-and-matters-needing-attention-in-HTML5-project/
22.众所周知，PS设计行业字体单位有像素、点、磅等单位，我们这里以像素为例子，而所谓的间距“-100、-75、-50。。。0。。。50、75、100”，这些其实是个相对关系和实际字体大小相关，文字字体越大实际间距也就越大，反之就越小。
实际像素大小 real_letter_spacing(单位为px）
文字字号 font-size(单位为px）
文字间距 spacing
它们的换算关系为：
real_letter_spacing = font-size * 10 / spacing
如果一段文字的字号为23px， 间距为100，那么实际间距为23px * 10 / 100 = 2.3px。
从而得出前端字体间距设置2.3px方可与设计图效果一致，实际测试也是如此，stype ="letter-spacing:2px";
23.针对HTML5 video "autoplay"无法自动播放的问题解决办法是：在video标签中添加muted属性，即