关于移动端开发的一些总结

转载地址：http://www.cnblogs.com/xsilence/p/5774737.html

1、 piexl 像素知识

640 * 1136的图片能不能在iphone5上完全展示？

iphone5分辨率640*1136

逻辑像素与物理像素的关系

px逻辑像素：浏览器使用的抽象单位

dp，pt物理像素：设备无关像素

dpr：设备像素缩放比

计算公式：1px = (dpr)^2 * dp

iphone5的 dpr = 2；

DPI:打印机每英寸可以喷的墨汁点（印刷行业）

PPI:屏幕每英寸的像素数量，即单位英寸内的像素密度

目前，在计算机显示设备参数描述上，二者意思一致

计算公式：以iphone5为例：ppi = √（1136^2 + 640^2）/4 = 326ppi（视网膜retina屏）

注意：单位为硬件像素（物理像素），非px

PPI越高，像素数越高，图像越清晰。但可视度月低（小），系统默认缩放比越大。

retina屏（高清屏）：dpr都是>=2。

2、 viewport

手机浏览器默认为我们做了两件事情：

① 页面渲染在一个980px（ios）的viewport

② 缩放

为什么要有viewport？

一个300多像素的屏幕，放一个1000多像素的页面，会混乱，所以要先虚拟一个980像素的页面，然后进行缩放。

度量|视口 visual viewport ==== 窗口缩放scale

布局 layout viewport

设计移动web，为什么不使用默认的980px的布局viewport？

① 宽度不可控制，不同系统的设备默认值都可能不同

② 页面缩小版显示，交互不友好

③ 链接不可点

④ 有缩放，缩放后又有滚动

font-size为40px等于pc上12px同等物理大小，不规范

3、 meta标签

移动web最佳viewport设置： 布局viewport = 设备宽度 = 度量viewport

4、 设计移动web

方案一：根据设备的实际宽度来设计（常用）（不缩放）

手机宽320px，我们就拿320px设计。

方案二：1px = 1dp，易解决高清问题

缩放0.5。根据设备的物理像素dp等于抽象像素px来设计。1px像素边框和高清图片都不需要额外处理。

以方案一为例，将pc端页面改成适应移动端的页面：

在移动开发过程中要学会做减法，一些不太重要的东西可以隐藏起来。

5、 使用什么布局？

很多网站都是使用固定布局，以前凡客、淘宝也有段时间使用过流式布局，现在都改成固定布局。

但是固定布局不适合移动开发。

可以使用

① 响应式布局：responsive 高清图片 retina px em rem

② flex弹性盒子布局：高效居中方案 等比例填充列行 background-size font-size 多行文本溢出

6、 flexbox弹性盒子布局

根据元素个数不同，自动填充

display:-webkit-flex; 表示使用弹性布局

子元素设置 flex:num; 占容器的比例

划分方式：

① 等比划分（flex:num;表示）

② 混合划分（有固定的像素（eg：100px）与flex:num;混合在一起）

③ 不定宽高的水平垂直居中：

position：absolute；

top：50%；

left：50%；

transform：translate（-50%，-50%）；

flexbox版不定宽高的水平垂直居中：

.parent{

justify-content : center; //子元素水平居中

align-items : center; //子元素垂直居中

display : -webkit-flex;

}

flexbox弹性盒子布局，介于兼容性问题，建议使用旧版方案：

①新flex布局：

display : -webkit-flex;

-webkit-fiex: 1; //子元素的flex

justify-content : center;

align-items : center;

②旧flexbox布局：

display : -webkit-flex-box;

-webkit-fiex-box: 1; //子元素的flex

box-pack : center;

box-center: center;

一种垂直居中的hack：

（1）hack方式

li{

line-height: 568px;

vertical-align:middle;

}

li img{

vertical-align:middle;

}

(2)更优雅的方式，对于高级浏览器来说

// 父元素

position:absolute;

// 子元素

li{

display: table-cell;/盒模型变成表格的元素/

vertical-align: middle;

}

(3)另一种垂直居中方式

li{

display: -webkit-box;

-webkit-box-pack:center;

-webkit-box-align:center;

}

7、 响应式布局

开发一个页面，在所有的设备上都能够完美展示。

媒体查询：@media screen and (max-width:100px) { }

媒体类型：screen（屏幕）

print（打印机）

handheld（手持设备）

all（通用）

常用媒体查询参数：

width —— 视口宽高

height —— 视口宽高

device-width —— 设备的宽高

device- height —— 设备的宽高

orientation：检查设备处于横向（landscape）还是竖屏（portrait）

响应式设计设计点

设计点一：百分比布局

仅仅使用媒体查询来适应不同固定宽度设计，只会从一组css到另一组css的切换。两种设计之间没有任何平滑渐变。只使用媒体查询，布局有时会变得不可控制。

当然，这只是建议，也有一些页面采用固定布局的情况下能够很好的在一些没有考虑过媒体查询情况下的设备上很好的展示。

设计点二：弹性图片

思路：无论何时，全都包在图片的元素宽度范围内，以最大的宽度同比完整的显示图片。

img{ max-height: 100% }

设计点三：重新布局，显示与隐藏

当页面达到手机屏幕宽度的时候，很多时候就要放弃一些传统的页面设计思想。力求页面简单，做如下处理：

① 同比例缩减元素尺寸

② 调整页面结构布局

③ 隐藏冗余的元素

经常需要切换位置元素使用【绝对定位】，减少重绘提高渲染性能。

关于响应式设计的思考：

根据响应式设计的理念，一个页面包含所有设备不同屏幕的样式和图片，当一个移动设备访问一个响应式的页面，就会下载pc，笔记本，ipad等不同设备对应的样式。而这些样式却是冗余的，完全没有用。

权衡利弊：性能不是最优，但是能减少重复开发。

8、 特殊样式处理

（1） 高清图片

在移动web页面上渲染图片，为了避免图片产生模糊，图片的宽度应该用物理像素单位渲染，即是100 * 100的图片，应该使用100dp * 10dp。

width：（w_value/dpr）px；

height：（w_height/dpr）px；

（2） 一像素边框

同样是retina屏幕下的问题，根本原因：1px使用2dp渲染。

border：0.5px；（错误），仅仅ios8可以使用

通用方案：scaleY（0.5）

（3） 相对单位rem

为了适应各大屏幕的手机，px略显固定，不能根据尺寸的大小而改变，使用相对单位更能体验页面兼容性。

em：是根据父节点的font-size为相对单位

rem：是根据html的font-size为相对单位

em在多层嵌套下，变得非常难以维护，rem更加能作为全局统一设置的度量

那么，rem的基值设置为多少比较好？

回归目的：为了适应各大手机屏幕

rem = screen.width / 20

不使用rem的情况：font-size

一般来讲font-size是不应该使用rem的相对单位的。因为字体的大小是趋向于阅读的实用性，并不适合于排版布局。

同理，趋向于一些固定的元素的特性。我们不使用rem而改为使用px去确保在不同屏幕上表现一致（跟rem的目的相反）。

（4） 多行文本溢出•••

单行文本溢出，对title类的使用非常多，而多行文本类，在详情介绍则用的比较多。

//单行文本溢出…

.inaline {

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

//多行文本溢出…

.intwoline {

display: -webkit-box: !important;

overflow: hidden;

text-overflow: ellipsis;
word-break: break-all;

-webkit-box-orient: vertical;

-webkit-line-clamp: 4;

}

9、 终端交互优化

对click事件say no

弹性滚动

上拉刷新

tap事件基础

touch触摸事件

下拉加载

300ms:

移动web页面上的click事件响应都要慢上300ms

用300ms判断是单击还是双击

(1) tap基础事件

300ms延迟怎么破？tap事件代替click事件。自定义tao事件原理：

在touchstart、touchend的记录时间、手指位置，在touchend时进行比较，如果手指位置为同一位置(或允许移动一个非常小的位移值)且时间间隔较短（一般认为是200ms），且过程中未曾触发过touchmove，即可认为触发了手持设备上的“click”，一般称它为“tap”。

tap“点透”的bug： 有两层，点击第一层的时候，如果点击的区域在第二层的范围内，那么第二层也会被触发。（原因与300ms有关）

tap透传的解决方案：

①使用缓存动画，过渡300ms的延迟

②中间层dom元素的加入，让中间层接收这个“穿透”事件，稍后隐藏

③“上下”都使用tap事件，原理上解决tap穿透事件，（但是不可避免原生标签的click事件，如a，input）。

③ 改用Fastclick的库（听过最新的zepto已经fixed掉这个bug）

(2) Touch基础事件

触摸才是移动设备的交互的核心事件，支持多点触摸。

touchstart：手指触摸屏幕触发（已经有手指放屏幕上不会出发）

touchmove：手指在屏幕上滑动，连续触发

touchend：手指离开屏幕时触发

touchcancel：系统取消touch时候触发（不常用）eg：滑动页面时来了一个电话或者其他系统事件

除常见的事件属性外，触摸事件包含专有的触摸属性：

touches：跟踪触摸操作的touch对象数组

targetTouches：特定事件目标的touch对象数组

changeTouches：上次触摸改变的touch对象数组

一个小BUG： android只会触发一次touchstart，一次touchmove，touchend不触发。（4.0，4.1有，4.2修复没有了，4.4开始又出现了）

解决方案： 在touchmove中加入：event.preventDefault（），可fixedBug。

但注意：event.preventDefault（）会导致默认行为不发生，如scroll，导致页面不滚动！如果页面带有滚动条，就需要考虑更换解决方案。

(3) 弹性滚动，下拉刷新

①弹性滚动：当客户端的页面滚动到顶部或底部的时候，滚动条会收缩并让我们多滑动一定距离。通过缓冲反弹的效果，带给用户良好的体验。

移动web页面也是拥有这样的能力的，但滚动有几种情况需要考虑：

body层滚动：（系统特殊化处理）

自带弹性滚动，overflow：hidden失效，GIF和定时器暂停。

局部滚动：没有弹性滚动，没有滚动惯性，不流畅。

局部滚动开启弹性滚动：

body {

overflow:scroll;

-webkit-overflow-scrolling:touch;

}

但注意：android不支持原生的弹性滚动！但可以借助三方库iScroll来实现

②下拉刷新：顶端下拉一小点距离，页面弹性滚动向下。

④ 上拉加载：使用scroll事件，而不是touch事件（android有bug）

(4) Canvas & GPU render【GPU 渲染】

优化技巧： canvas代替img标签

drawImage（image，x，y）；canvas上绘制图片

drawImage（image，x，y，width，height）；canvas上绘制缩放图片

原因： img使用浏览器渲染，当图片特别大且手机性能不是很好的情况下，会特别卡，通常表现在滑动图片。因为没有触发物理设备本身的GPU（图形处理器）渲染

image object：

① 预加载图片：当设置img.src=””的时候，就表示请求加载图片

② 图片的按比例缩放

(5) css3 animation

当一个css3动画结束时，我们可以监听相关事件AnimationEnd，比如对于webkit来说，是webkitAnimationEnd。

10、 跨终端web

① 单域 - Media Query

② 单域 – 多模板

③ 多域 – 跳转（很原始）

④ 多平台 App

（1） 移动优先：

① 移动端的用户和流量越来越多

② 各种屏幕让我们更聚焦业务的本领

③ 移动设备有更先进的人机交互体验

（2） 多终端检测

（3） 接口：结构：通用接口，

接口模型：前端消费者；后端生产者；测试监督者

11、零碎的细节

1）CSS3动画，代替DOM animation，效率更高，因为css3直接使用浏览器的GPU（图形处理器）渲染

2） 当你给一个元素设置它的百分比宽度的时候，他需要一个比照，也就是父元素，但是当它没有父的时候，需要给他一个绝对定位absolute值，但是在移动开发中，给整个整块的页面使用position: absolute;很占用内存，特别是当内容比较多的时候，会非常明显。会有几个后果：在ios下，会导致浏览器直接崩溃掉；在android下，会导致非常非常的卡。所以建议直接用js计算。

3）将图片显示到一排上，不使用浮动，使用-webkit-transform:translate3d(0,0,0); position: absolute;

4）new Date() * 1；// * 1 ，进行数值运算，转换为数字形式的时间戳

5）

self.startX = evt.touches[0].pageX; //记录开始的位移,touches包含着所有手指触摸在屏幕上的点的集合

-webkit-backface-visibility:hidden;/* 防止闪白 */

6）更多图片的优化，保留3个要使用的节点，当前的，上一个，下一个图片的节点，剩余的不需要的删除

7）jQuery Mobile（JQM jQMobile）

是jQuery在手机上和平板设备上的版本，是创建移动web app的框架。

8）2048制作过程中遇到的bug：（见9（2）touch基础事件BUG）

// 手机上手指识别无用，chrome19827号错误：touchevent不被触发。防止没有正确使用preventDefault()

document.addEventListener(‘touchmove’, function(event) {

event.preventDefault();

});

10）使用Dropbox发布自己的web app

免费

限制： ① 静态网站 ② 速度较慢（在国外） ③ 域名不宜记忆

11）web app、native app和hybrid app（混合模式）