移动端开发知识点总结
在去年的这个时候，开始慢慢接触到移动端，接触移动端并不早。但那时查找相关资料不是很多(没技术，找不到)，只有在慢慢的摸索敲打代码中寻找方法！记得那时一直纠结为什么别人的图片在手机上那么清晰，而我们做的就那么的模糊，后来听过放大图片，之后用代码缩小，才保证在手机上清晰。(后面才了解到是DPI, retina 2x 的问题)。
废话少说，进入正题！
以下为移动端需要的知识点整理：
1）移动端屏幕多种多样，DPI(像素密度)不同，越高图像越清晰。而普通android手机和iphone手机的分辨率的基本比例1:2。 故此知道了为什么在苹果上的图标变模糊了， 因为默认被放大了两倍大小来呈现页面！
目前我们的手机设计图为iphone5s的分辨率640*1136, 而在切图的时候，使用320的宽度制作。为何这样呢？
原因还是因为retina屏的高分辨率，把缩小一倍大小，保证图片的高清1:2比例。如果在条件允许，建议制作多套图标，之后通过媒介引入。
详细步骤介绍，参考大漠的： 走向视网膜（Retina）的Web时代
2）viewport:可视区域，此方法有多个设置设置参数：
width = [pixel_value | device-width] // 宽度(可选实际宽度值或者 第二个参数) height = [ pixel_value |device-height] // 高度 initial-scale = float_value // 初始比例 minimum-scale = float_value // 最小比例 maximum-scale = float_value // 最大比例 user-scalable = [yes | no] //是否缩放
此参数分别设置可视区域，比例大小，通常都使用如下代码：
<meta name="viewport" content="width=device-width; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/>
宽度采用设备的宽度，默认及最大最小比例都为1，不允许缩放！ 正常我们还会为iphone手机设置如下参数：
<!-- iphone 状态栏样式 --> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 离线应用（看需求而定 --> <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 禁止识别电话号码 --> <meta name="format-detection" content="telephone=no" /> <!-- iphone保存桌面应用,webapp --> <meta name="apple-touch-fullscreen" content="YES" />
3）字体大小，在手机端中最好采用大小EM作为制作单位，而不是PX。目前手机的分辨率繁多，有的手机字体默认是24px为最小单位，有的则是16px。所有为了统一字体，通常会在样式中设置如下代码：
html, body { font-size:100% }
保证字体大小安装默认的大小设置，而后，所有字体采用EM计算大小，这样可以保证在跨设备的时候，字体的不会有大小不一的请求。而字体PX到EM的换算方式，可以参考大漠的：CSS中强大的EM
4）流体布局(fluid layout)，目前已知移动端设备屏幕过多，所以排版不能使用1024px之类的固定布局，那何为流体布局呢？流体布局的测量单位和固定布局的测量单位不同，流体布局采用的是百分比，也就是说随着设备屏幕的变化，布局的百分比也跟着相应的变化，提高了页面的流动性。流体布局及各种布局介绍，参考大漠的：响应式设计：流体布局
同时，流体布局与媒介查询关系密切，媒介属性允许不同设备（如屏幕、打印机）指定不同的样式表，以及根据设备的屏幕宽高等指定对应的样式。流体布局和媒介查询相结合才能构建更好的移动端页面。什么？媒介查询不知道，那么请看大漠的文章介绍：CSS3 Media Queries
移动端的知识点，其实说多不多，只是需要从以往的制作方式转换过来！很多移动端相关的文字，在大漠的网站上都有相应的介绍，本文主要是整理所需的知识点，一下再介绍下移动端的部分注意问题：
1）字体选择：iOS 4.0+ 使用英文字体 Helvetica Neue，之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi。
body { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; }
2）设置全局的CSS样式，避免图中的长按弹出菜单与选中文本的行为
a, img { -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */ } html, body { -webkit-user-select: none; /* 禁止选中文本（如无文本选中需求，此为必选项） */ user-select: none; }
各种性能优化方面，参考：移动开发规范概述
3) 百分比大小，遇到padding / border导致页面宽度不是预期的效果，可以使用以下css样式，改变盒子模型：
.box { box-sizing:border-box; /* 可以不用在计算 padding 以及 border */ }
4）点击<a>链接或者绑定click事件，会在移动端部分android机中出现一个虚拟边框，使用以下CSS样式，清除边框：
a { -webkit-tap-highlight-color:rgba(255,0,0,0); }
5）iphone 手机 input 输入框出现奇怪的圆润风格，iphone的默认风格，解决方法：
input { -webkit-appearance: none; }
当时出现这个原因，找了好长时间才在一个外国很出名网站stackexchange 找到答案。原文：Turn off iPhone/Safari input element rounding
6）脚本问题，在移动端使用click事件，会有300ms的延迟，所以最好使用触摸事件 touch. 请看：300毫秒点击延迟的来龙去脉。 而移动端，最好不要使用jquery / jquery mobile 框架，原因是因为太大对页面性能不好，建议 zepto.js，语法jquery类似，快速上手。
7）涉及动画，可以考虑是否使用 translate3D 来触发 GPU 加速，原因是某些动画在移动端中执行速度会出现卡顿现象，提高流畅度
.box { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
如动画过程有闪烁（通常发生在动画开始的时候），可以尝试下面的Hack：
.box { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; }
具体参考司徒正美文章：用CSS开启硬件加速来提高网站性能（转）， 未完，后续更新。。
总结：本文为移动端相关资料整理，知识有限，欢迎各位批评指点！
