移动端Web开发注意事项（响应式）

移动端WebApp开发必备知识：：http://mobile.51cto.com/web-442588.htm 

移动Web资源管理：http://www.cnblogs.com/PeunZhang/p/3407453.html#question_17        http://www.w3cfuns.com/blog-5470280-5406828.html

Web App优化整理：http://www.cnblogs.com/yexiaochai/p/3759959.html

移动WebAPP前端开发技巧汇总：http://www.25xt.com/html5css3/6755.html     http://sentsin.com/web/54.html

随之而来的iphone6及iphone 6 plus更大屏幕尺寸的适配：http://www.zan3.com/zan2607.html
单页webapp应用开发：http://my.oschina.net/maomi/blog/183790?p=1#OSC_h4_15

移动Web适配总结：http://www.w3ctech.com/topic/979

 

 

Zepto使用注意事项：http://www.cnblogs.com/samwu/archive/2013/06/06/3121649.html)

移动端下拉刷新插件：https://github.com/lightningtgc/material-refresh    http://www.cnblogs.com/duanhuajian/archive/2013/04/08/3008323.html

响应式Web设计代码实现：http://bbs.html5cn.org/thread-86091-1-1.html   

移动webapp触摸滑动最优解决方案：http://be-fe.github.io/iSlider/#demo      http://www.swiper.com.cn/

微信中一些常用的js事件积累：http://bbs.html5cn.org/thread-86615-1-1.html

适应手机端的jQuery图片滑块动画：http://www.html5cn.org/article-7151-1.html

移动端自适应图片大小：http://www.w3cplus.com/css/flexible-images.html

移动端Web开发调试之Chrome远程调试：http://blog.csdn.net/freshlover/article/details/4252864

 

 

head标签部分添加以下代码：

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="yes" name="apple-touch-fullscreen" />  
<meta content="black" name="apple-mobile-web-app-status-bar-style" />

<meta content="telephone=no;email=no" name="format-detection" /> 

<!--[if lt IE 9]> 

<script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 

<![endif]--> 

第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，文档初始化缩放比例是1:1，不允许用户点击屏幕放大浏览，允许用户缩放到的最大比例。尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开，如果不规范将不会起作用。其他属性有：width;height; initial-scale; minimum-scale; maximum-scale; user-scalable;

第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；

第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；

第四个meta标签表示：告诉设备不识别邮件和忽略将页面中的数字识别为电话号码

 

常见问题：

移动端开发页面样式重置知识点：http://jingyan.baidu.com/article/cbf0e5008b81382eaa28933f.html

微网站拨号功能：http://jingyan.baidu.com/article/e5c39bf59ff18339d7603385.html

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;}/* 屏蔽输入法 */

在页面定义如下：

<input type="text" name="password" class="ime-disabled" >

16.使得外层元素内容（包括图片）居中：

外层元素{

position: absolute;

display: -webkit-box;

-webkit-box-pack: center;

-webkit-box-align: center;

}

或

外层元素{

display: table-cell;

vertical-align: middle;

}