移动Web App开发

2016-07-05 08:44:00

移动Web基础知识

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

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

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

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

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

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

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

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

Viewport视图

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

Viewport Meta标签:

移动Web最佳viewport设置：

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

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

  3. minimum-scale:最小缩放

  4. maximum-scale:最大缩放

  5. 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弹性布局属性：

  1. flex:flex伸缩布局；display:-webkit-flex;

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

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

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

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

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

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

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

  9. order:显示顺序:

  10. 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;
}
}
媒体类型：

  1. Screen-屏幕

  2. print-打印机

  3. handheld-手持设备

  4. all-通用

常用媒体查询参数：

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

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

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

  4. resolution 设备分辨率,不同于像素

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

移动Web特别样式处理

高清图片

在移动web页面上渲染图片，为了避免图片产生模糊，图片的宽高应该用物理像素单位渲染，即100100的图片，应该使用100dp100dp.
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;

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

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

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

  3. text-overflow:ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。

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

-webkit-box-orient: vertical; // 方向垂直
-webkit-line-clamp: 2; // 自动截断显示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

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

产生穿透事件的条件：
1、两个dom在屏幕的垂直方向是重叠的，并且z-index不同。
2、采用touch系列的点击事件去点击朝外的dom，并且这个dom隐藏或者移开。
3、在下方的dom绑定了click或者默认的点击事件（a标签，buttom等）
只有满足上述条件才会触发穿透事件，就是点击外dom，外dom消失，但下边的dom也会触发click事件（比如跳转链接）
产生此现象的原因：
因为click的300延迟，导致用户体验不佳，所以很多人都会采用touch系列代替click。
在点击事件中，点击的顺序是这样的：
touchstart > touchmove > touchend > click
而轮到click事件的时候还在再延迟了300毫秒，所以touchstart的触发速度是远大于click的，回到上述的产生穿透的条件中去
1、touchstart事件触发，外层dom消失，可是点击屏幕后会有个浏览器默认的click产生，首先就作用于当时click触发时点击的屏幕最外层的dom，即在重叠的条件下，zindex最大的dom，然后顺着dom树往上爬
2、因为有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常见事件及属性

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

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

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

  4. touchcancel：系统取消touch时触发(不常用)

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

  1. touches:跟踪触摸操作的touch对象数组

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

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

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

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

  6. identifier:标识触摸的唯一ID。

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

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

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

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

  11. target:触摸的DOM节点目标。

弹性滚动(IOS系统适用)

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

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

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

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

局部滚动开启弹性滚动：

body{
overflow：scroll;
-webkit-overflow-scrolling:touch;
}
Android不支持原生的弹性滚动！需要借助第三方库iScroll来实现。

下拉刷新

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

上拉加载

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

Web App打包工具：

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

  1. Appcan

  2. phonegap

  3. appcelector

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

常见Web App框架

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

Hybrid App：

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

Hybrid App优缺点

  1. 综合了开发效率和运行效率

  2. 发版本方便

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

  4. 需要写一点原生代码(至少2个平台)

参考链接：

  1. click300延迟与点击穿透

关键字：webapp

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！

相关文章

Django 学习小组：基于类的通用视图详解（一）

移动Web App开发

Web App防坑手册

WebApp 设计要素

立即
投稿

微信公众账号

微信扫一扫加关注

 返回
顶部