WEB_APP入门1

参考：Hello，移动WEB

 

移动web的开发基础，高效的排版布局，常见的移动web问题，终端触摸交互

pixel像素基础

pt,px

Viewport

640*960

initial-scale=1.0

devicePixelRadio

ppi==326ppi

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

iphone5分辨率640*1136

px:CSS pixels逻辑像素，浏览器使用的抽象单位

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

dpr:devicePixelRatio设备像素缩放比

计算公式1px =

平面上1px =

640dp*1136dp=320px*568px

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

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

计算公式：

(视网膜Retina屏)

PPI越高，像素越高，像素越清晰

但是可视度越低（小），系统默认设置缩放比越大。

可参考：dp的定义原理和dpi,ppi,px,pt,sp之间的区别

	ldpi	mdpi	hdpi	xhdpi
ppi 默认缩放比	120	160	240	320
	0.75	1.0	1.5	2.0

 

 

 

 

Retina屏（高清屏）：dpr都是大于等于2

Viewport视图

一个PC的页面在移动设备上展示效果怎么样的？

demo0.8_pc.html:207 document.body.clientWidth -- 980
demo0.8_pc.html:208 window.innerWidth -- 1030
demo0.8_pc.html:209 screen.width -- 320
demo0.8_pc.html:211 scale -- 1.0510204081632653

手机浏览器默认：

1、页面渲染在一个980px(ios)的viewport

2、缩放

为什么渲染时，要有Viewport?

为了排版正确

visual viewport(度量/视口）：

visual viewport=窗口缩放salce

layout viewport:布局viewport

为什么不使用默认的980px的布局viewport

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

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

链接不可点

有缩放，缩放后又有滚动

比如：font-size为40px等于PC上12px同等物理大小，不规范

<meta name="viewport" content="width=320,initial-scale=1">

Viewport_Meta标签

<meta name="viewport" content="name=value,name=value">

name	说明	value
width	设置布局vieport的特定值（“device-width”）	为一个正整数，或字符串"width-device"
initial-scale	设置页面的初始缩放	float，设为1.0则将显示未经缩放的Web文档
minimum-scale	最小缩放	float，值的范围为0.25至10.0之间
maximum-scale	最大缩放	float，值的范围为0.25至10.0之间
user-scalable	用户能否缩放	值为"no"或"yes", no 代表不允许，yes代表允许

 

 

 

 

 

 

 width=device-width:[布局viewport=设备宽度]

initial-scale自带width=device-width:[度量viewport]=[布局viewport]

常用：<meta name="viewport" content="width=320,initial-scale=1, user-scalable=no">

width和height指令分别指定视区的逻辑宽度和高度。他们的值要么是以像素为单位的数字，要么是一个特殊的标记符号。width指令使用device-width标记可以指示视区宽度应为设备的屏幕宽度。类似地height指令使用device-height标记指示视区高度为设备的屏幕高度。

initial-scale指令用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在浏览器中呈现出整个Web页面，设为1.0则将显示未经缩放的Web文档。

maximum-scale和minimum-scale指令用于设置用户对Web页面缩放比例的限制。值的范围为0.25至10.0之间。与initial-scale相同，这些指令的值是应用于视区内容的缩放比例。

viewport_coding

方案1：根据设备的实际宽度来设计（常用）

手机宽320px,我们就拿320px设计

方案2:1px=1dp

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

高效移动web布局介绍

流体式布局：元素宽度按照分辨率宽度进行长度、宽度的调整，但布局不变

缺点： 如果屏幕尺度跨度过大，那么在相对原始设计而言过小或过大的屏幕上不能正常显示

现在PC基本都是固定布局，而移动端因为设备差异过大，用不了固定布局

Flexbox弹性盒子布局

Flex弹性盒模型

web_flex.html

响应式设计

兼容性：

iOS可以使用最新的flex布局

android4.4以下，只能兼容旧版的flexbox布局

android4.4及以上，可以使用最新的flex布局

新flex布局	旧flex布局
display:-webkit-flex	display:-webkit-flex-box;
-webkit-flex:1;	-webkit-flex-box:1;
justify-content: center;	box-pack:center;
align-items:center;	box-align:center;

 

 

 

 

 

 

media

媒体查询

	/*额外为1024px范围做了些调节*/
 	@media screen and (max-width:1024px) {

 		#pagewrap {
            width: 95.5%;
        }
        #content {
            width: 62%;
        }
        #content .article .hr{
            width: 66%;
            margin-left: 34%;
        }
	}
	

媒体类型：

screen	屏幕
print	打印机
handheld	手持设备
all	通用

 

 

 

 

 

常用媒体查询参数

width	视口宽高
height	视口宽高
device-width	设备的宽度
device-height	设备的高度
orientation	检查设备处于横向（landscape）还是竖屏（portrait）

 

 

 

 

 

 

设计点1：百分比布局

设计点2：弹性图片

img{max-width:100%}

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

同比例缩减元素尺寸，调整页面结构布局，隐藏冗余的元素

移动Web特别样式处理

1像素边框

相对单位rem

em: 根据父节点font-size为相对单位

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

rem的基值设置多少好？

rem=screen.width/20

//默认320px
html{font-size: 32px;}

//iphone6
@media (min-device-width:375px){
    html{font-size: 37.5px;}
}

//iphone6 plus
@media (min-device-width:414px){
    html{font-size: 41.4px;}
}

不使用rem的情况：font-size

多行文本溢出

.content .article .desc{
	color:#858585;
	cursor: pointer;

    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;

}

终端交互优化

PC端	移动端
click事件，hover等鼠标事件	tap事件，弹性滚动，touch触摸事件，上拉刷新,下拉加载

 

 

 

 

TAP基础事件

300毫秒的故事：

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

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

　为了减少这300ms的延迟，tap事件被很多框架（如zepto）封装，来减少这延迟问题， tap事件不是原生的，所以是封装的，那么具体是如何实现的呢？

原理：

在touchstart、touchend时记录时间、手指位置，

在touchend时进行比较，如果手指位置为同一位置（或允许移动一个非常小的位移值），且时间间隔较短（200ms内），

且过程中未曾触发过touchmove,即可认为触发了手持设备上的“click”,一般称它为"tap";

　　主要考虑到下面两点：

• 按住的事件不能超过延时时间，因为长时间可能就是浏览器的复制、粘贴等操作了。
• 不能在页面中移动，移动是不能触发tap事件的。 

 

触摸touch

核心事件

touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。

touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。

touchend事件：当手指从屏幕上离开的时候触发。

touchcancel事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明，咱们只能去猜测了。

隐藏属性

    touches：表示当前跟踪的触摸操作的touch对象的数组。

    targetTouches：特定于事件目标的Touch对象的数组。

    changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。

每个Touch对象包含的属性如下。

    clientX：触摸目标在视口中的x坐标。

    clientY：触摸目标在视口中的y坐标。

    identifier：标识触摸的唯一ID。

    pageX：触摸目标在页面中的x坐标。

    pageY：触摸目标在页面中的y坐标。

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

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

    target：触目的DOM节点目标。
 弹性滚动：

body层滚动：

局部滚动：局部滚动开启弹性滚动：

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

下拉刷新：