标签：
Amaze移动端开发框架：http://amazeui.org/
Zepto.js：http://www.css88.com/doc/zeptojs_api/
移动端下拉刷新插件：https://github.com/lightningtgc/material-refresh
响应式Web设计代码实现：http://bbs.html5cn.org/thread-86091-1-1.html
参考网址：http://mobile.51cto.com/web-442588.htm http://sentsin.com/web/54.html
GMU是基于zepto的mobile UI组件库：http://gmu.baidu.com/
移动Web资源管理:http://www.cnblogs.com/PeunZhang/p/3407453.html#question_17
微信中一些常用的js事件积累：
http://bbs.html5cn.org/thread-86615-1-1.html
head标签部分添加以下代码：
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable" >
<meta content="black" name="apple-mobile-web-app-status-bar-style" >
<meta content="telephone=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.0，且不允许用户点击屏幕放大浏览；
第二个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%;}
box-flex弹性盒模型（伸缩式布局）：http://www.cnblogs.com/acmilan/archive/2012/03/02/2377812.html
测试Media Queries（响应式布局）：http://responsivator.queenslandwebplan.com/
语法结构及用法:
@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}
//横屏
@media screen and (orientation:landscape){
}
//竖屏
@media screen and (orientation:portrait){
}
CSS3-Media Query的两种应用响应式布局的方式：
1.在头部head标签中，引用外联样式link标签中添加media="only screen and (max-width:480px)"
2.在样式style标签中添加：@media screen and (min-width: 480px){样式属性}
建议：1.重点都应放在网页logo和文字上。如果文字能在移动设备上能读得很轻松，然后你在平板和台式机平台上就不会有什么问题了。
2. 如果你的站点只有两到三个导航按钮，你可以把这些按钮包含在屏幕上一个简单的菜单里。如果有更多的菜单元素，你可能想考虑创建一个有下拉菜单项的单个图标。
3.当创建一个移动端的页面时，非常重要的一点是把按钮设计足够指尖能覆盖住那么大，另外一点就是使界面保持既简洁又实用的状态。许多设计者倾向于往移动端界面添加太多的元素，这会导致设计和实用性的问题。当有疑问时，保持简洁的页面就好了。
4. 当创建响应式设计布局时，要为每个布局使用优化的图像。这会减少缩放和宽带的问题，使用JPEG、GIF和PNG-8格式的图像，而不要使用PNG格式，因为它会让你的文件大小膨胀5到10倍。
5.只使用那些必要的文字，而不是把你的桌面电脑设计复制到你的移动端来。后者往往会造成长期滚动的页面，这种糟糕的体验会让你在移动端失去很多用户。
6.使用API的时候，要小心。你偶然的一个行为可能会导致站点的性能问题。如果有疑问的话，测试下组件先。
7.一定要保证在设计你的网站时，要去掉所有的非必需品，这将大大缩短页面加载时间。
移动端Web开发（响应式设计）
标签：
原文地址：http://www.cnblogs.com/gyx19930120/p/4420005.html
