移动Web App开发

移动Web基础知识

移动开发像素((Pixel)知识

css的一个像素只是一个抽象的单位，在不一样的设备中表明的设备物理像素是不一样的。

• px:css pixels,逻辑像素，浏览器使用的抽象单位；

• dp,pt:device independent pixels,设备无关像素,物理像素

• dpr:devicePixelRatio,设备像素缩放比
  计算公式：1px=（dpr）^2 *dp
  1px = dpr ^2 * dp 是平面上的像素换算，但实际开发当中使用更多的是长度上的换算：
  1px = dpr * dp。

• DPI:打印机每英寸能够喷的墨汁点（印刷行业）

• PPI:屏幕每英寸像素数量，即 每英寸像素密度
  好比手机分辨率是1920*1080 手机尺寸5英寸
  ppi=开方(1920^2+1080^2) /5

• Retina屏(高清屏)：dpr都是>=2
  

Viewport视图

没有viewport，直接渲染，会使得排版混乱。viewport提供一个虚拟的页面来渲染文档，而后再缩放比例。

Viewport Meta标签:

移动Web最佳viewport设置：
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

• width:设置布局viewport的特定值("device-width")

• initial-scale:设置页面的初始缩放

• minimum-scale:最小缩放

• maximum-scale:最大缩放

• user-scalable:用户可否缩放

设计移动Web

方案一: 根据设备的实际宽度来设计(经常使用)
手机宽320px, 咱们就拿320px设计
方案二: 1px = 1dp
缩放0.5, 根据设备的物理像素dp等于抽象像素px来设计. 1像素边框和高清图都不须要额外处理.

高效的移动Web布局

Flexbox弹性盒子布局

不定宽高的水平垂直居中布局

.wrapper{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

flexbox版-不定宽高的水平垂直居中布局

.parent{
justify-content:center;//子元素水平居中
align-items:center;//子元素垂直居中
display:-webkit-flex;
}

Flexbox弹性布局属性：

• flex:flex伸缩布局；display:-webkit-flex;

• flex-direction: 伸缩流方向：row/column/row-reverse/column-reverse

• flex-wrap:伸缩换行，nowrap/wrap/wrap-reverse

• flex-flow:伸缩流方向与换行，flex-direction和flex-wrap属性的缩写版本。

• justify-content:主轴对齐方式：flex-start/flex-end/center/space-between/space-around

• align-items:伸缩项目行在侧轴对齐方式：flex-start/flex-end/center/stretch/baseline

• align-self:伸缩项目自身在侧轴对齐方法:flex-start/flex-end/center/baseline/stretch

• align-content:堆栈伸缩行,伸缩行在侧轴对齐方式:flex-start/flex-end/center/space-between/space-around/stretch

• order:显示顺序:

• flex:伸缩性(伸缩项目的宽度/高度自动填充伸缩容器额外空间)：包含3个参数：flex-grow(扩展比率,默认0)/flex-shrink(收缩比率,默认1)/flex-basis(伸缩基准值，默认auto)

Flexbox弹性盒子布局-兼容性
iOS可使用最新的flex布局
android4.4如下，只能兼容旧版flexbox布局
android4.4及以上，可使用最新flex布局。

响应式布局

响应式布局：可让一个网站兼容不一样分辨率的设备，给用户更好的视觉使用体验。
格式：@media 媒体类型 and （媒体特性）{你的样式}

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

媒体类型：

• Screen-屏幕

• print-打印机

• handheld-手持设备

• all-通用

经常使用媒体查询参数：

• device-width,device-height 屏幕宽高，物理

• width,height 渲染窗口宽度，可视

• orientation 设备方向，竖屏(portrait)和横屏(landscape)展现的区别对待

• resolution 设备分辨率,不一样于像素

响应式设计要点：
设计点1：百分比布局
设计点2：弹性图片：img {max-width:100%;}
设计点3：从新布局，显示与隐藏

移动Web特别样式处理

高清图片

在移动web页面上渲染图片，为了不图片产生模糊，图片的宽高应该用物理像素单位渲染，即100*100的图片，应该使用100dp*100dp.
width:(w_value/dpr)px;
height:(h_value/dpr)px;

一像素边框

一样是retina屏幕下的问题，根本缘由1px使用2dp渲染
解决方法：scaleY(.5)

.itemList li + li:before{
    position: absolute;
    top: -1px; 
    left: 0px; 
    content: '';
    width: 100%;
    height: 1px;
    border-top: 1px solid #d1d1d1;
    -webkit-transform: scaleY(0.5);

相对单位rem

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

em:根据父节点的font-size为相对单位
rem:根据html的font-size为相对单位
em在多层嵌套下变得很是难以控制；rem更加可以做为全局统一设置的度量
不使用rem的状况：font-size(字体大小)

多行文本溢出

单行文本溢出

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

多行文本溢出
一、WebKit浏览器或移动端的页面
在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，能够直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp 。
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它须要组合其余的WebKit属性。
常见结合属性：

• display: -webkit-box; 必须结合的属性 ，将对象做为弹性伸缩盒子模型显示 。

• -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

• text-overflow:ellipsis;，能够用来多行文本的状况下，用省略号“…”隐藏超出范围的文本 。

display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;

-webkit-box-orient: vertical; // 方向垂直
-webkit-line-clamp: 2; // 自动截断显示2行

二、跨浏览器兼容的方案:
设置相对定位的容器高度，用包含省略号(…)的元素模拟实现；

.tab-paragraph {
    position: relative;
    line-height: 1.4em;
    height: 4.2em;//高度=行高*行数
    overflow: hidden;
.tab-paragraph::after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    font-weight: 600;
    padding: 0 1px 1px 5px;
    background: linear-gradient(to right,transparent,#fff 55%);
}

参考连接：多行文本溢出显示省略号(…)全攻略

终端交互优化

Tap基础事件

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

由来：
ios safari双击放大页面，因为浏览器大都具有这种特性，因此浏览器都约定在300毫秒的间隔来判断是不是双击仍是单击，超过300毫秒还没第二次点击浏览器才判断这次点击是单击。
本意是好的,正常的逻辑实现,可是在现实的应用场景中,用户每每会以为 web app 的事件触发不是那么灵敏,有那么一点延迟。
参考阅读：5步解决移动设备上的300ms点击延迟

300ms延迟怎么破？使用Tap事件代替click事件

自定义Tap事件原理：

在touchstart、touchend时记录时间、手指位置，在touchend时进行比较，若是手指位置为同一位置(或容许移动一个很是小的位移值)且时间间隔较短(通常为200ms),且过程当中不曾触发touchmove，便可认为触发了手持设备上的"click"，通常称它为"tap"

移动端click事件响应慢ms,因此用tap事件替换click事件,tap事件可经过touchstart与touchend自定义,也可使用zepto.js实现.可是tap事件有bug(tap透传),触发以后过300ms后又触发click事件

Tap“点透(穿透)”的bug

即点击会触发非当前层的点击事件。

产生穿透事件的条件：
一、两个dom在屏幕的垂直方向是重叠的，而且z-index不一样。
二、采用touch系列的点击事件去点击朝外的dom，而且这个dom隐藏或者移开。
三、在下方的dom绑定了click或者默认的点击事件（a标签，buttom等）
只有知足上述条件才会触发穿透事件，就是点击外dom，外dom消失，但下边的dom也会触发click事件（好比跳转连接）
产生此现象的缘由：
由于click的300延迟，致使用户体验不佳，因此不少人都会采用touch系列代替click。
在点击事件中，点击的顺序是这样的：
touchstart > touchmove > touchend > click
而轮到click事件的时候还在再延迟了300毫秒，因此touchstart的触发速度是远大于click的，回到上述的产生穿透的条件中去
一、touchstart事件触发，外层dom消失，但是点击屏幕后会有个浏览器默认的click产生，首先就做用于当时click触发时点击的屏幕最外层的dom，即在重叠的条件下，zindex最大的dom，而后顺着dom树往上爬
二、由于有300毫秒的延迟，因此在第一步的touchstart后，外层dom就消失了，等300毫秒后click触发了，等着他的dom倒是在下面那层的dom（由于此时这个dom已经在最上层了），因此本来在下面的这个dom就触发了click事件。
因此说外层dom会消失是很重要的条件，若是外层dom没有消失，那延迟的click触发时仍是做用在外层的dom上，而外层dom没绑定click事件。
这就是穿透的原理。

Tap透传的解决方案
1.使用缓动动画，过渡300ms的延迟
2.中检测dom元素的加入，让中间层接受这个"穿透"事件，稍后隐藏
3."上下"都使用tap事件，原理上解决tap透传事件(但不可避免原生标签的click事件)
4.取消click默认事件。
既然每次单击是都会有个浏览器的click默认事件触发，既然咱们不须要，那就把这个默认事件取消掉就行了，因此在js中加上这句话

if (ev.type == 'touchend') {
  ev.preventDefault();
}

5.改用Fastclick库

触摸touch

touch事件touch是针对触屏手机上的触摸事件。现今大多数触屏手机webkit内核提供了touch事件的监听，让开发者能够获取用户触摸屏幕时的一些信息。
其中包括：touchstart,touchmove,touchend,touchcancel 这四个事件.touchstart,touchmove,touchend事件能够类比于mousedown，mouseover
，mouseup的触发。

触摸touch常见事件及属性

• touchstart ： 当手指触摸到屏幕会触发(已经有手指放屏幕上不会触发)

• touchmove : 当手指在屏幕上移动时，会连续触发；

• touchend : 当手指离开屏幕时，会触发；

• touchcancel：系统取消touch时触发(不经常使用)

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

• touches:跟踪触摸操做的touch对象数组

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

• changeTouches:上次触摸改变的touch对象数组
  每一个touch对象包含属性：

• clientX:触摸目标在视口中的X坐标。

• clientY:触摸目标在视口中的Y坐标。

• identifier:标识触摸的惟一ID。

• pageX:触摸目标在页面中的x坐标(包含滚动)

• pageY:触摸目标在页面中的y坐标(包含滚动)

• screenX:触摸目标在屏幕中的x坐标。

• screenY:触摸目标在屏幕中的y坐标。

• target:触摸的DOM节点目标。

弹性滚动(IOS系统适用)

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

移动web页面也有这样的效果，但滚动有几种状况须要考虑：

• body层滚动:(系统特殊化处理)
  自带弹性滚动，overflow:hidden会失效，GIF和定时器暂停。

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

局部滚动开启弹性滚动：

body{
    overflow：scroll;
    -webkit-overflow-scrolling:touch;
}

Android不支持原生的弹性滚动！须要借助第三方库iScroll来实现。

下拉刷新

顶端下拉一小点距离，页面弹性滚动向下

上拉加载

使用scroll事件，而不是touch事件(android有bug)

Web App打包工具：

基于HTML5+CSS3+JS开发Web App,经过打包工具将Web App变成ISO/Anroid应用。
常见的打包工具：

• Appcan

• phonegap

• appcelector

• Intel XDK(设计开发打包一体化工具)

常见Web App框架

Web APP优缺点：
致命缺陷：运行效率太差
纯Web App应用参考："豆瓣音乐人"

Hybrid App：

如桌面平台上的Hybrid App应用：酷我音乐盒/QQ
移动平台上的Hybrid App:如QQ


Hybrid App优缺点

• 综合了开发效率和运行效率

• 发版本方便

• 运行效率中等(切换engine交互效果)

• 须要写一点原生代码(至少2个平台)

参考连接：

1. click300延迟与点击穿透