移动端开发知识点总结

浏览数：29 / 时间：2015年06月11日

　　在去年的这个时候，开始慢慢接触到移动端，接触移动端并不早。但那时查找相关资料不是很多(没技术，找不到)，只有在慢慢的摸索敲打代码中寻找方法！记得那时一直纠结为什么别人的图片在手机上那么清晰，而我们做的就那么的模糊，后来听过放大图片，之后用代码缩小，才保证在手机上清晰。(后面才了解到是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手机设置如下参数：

// 隐藏地址栏 状态栏 
<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"  />

　　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;   
}