移动web

流式布局

1，流式布局：

​ 使用百分比布局，是一个非固定的像素，内容向两侧填充，理解成流动的布局

2，视觉窗口：

​ viewport，移动端特有的，这是一个虚拟的区域，承载网页的

​ 分三类：设备视口=页面视口，理想视口：一种理想的状态

​ 承载的关系：浏览器------->viewport-------->网页

3，适配要求：

​ 1）网页的宽度必须和浏览器的宽度保持一致

​ 2）默认的显示缩放比例和PC端保持一致

​ 3）不允许用户进行缩放 user-scalable =0

​ ------达到以上三点，达到了适配，是国际上通用移动端的适配方案

4，适配设置：

​ 视觉窗口：在head标签下，添加<meta name='viewport' content='适配要求'>

​ !--快捷键：meta:vp--

​ viewport的功能：

​ 1)width:设置页面宽度 = device-width当前设备的宽度

​ 2）height：设置页面高度

​ 3）initial-scale ：设置默认的缩放比例 1.0 【0.0~10.0】

​ 4）minimum-scale :设置最大缩放比例

​ 5）maximum-scale :设置最小缩放比例

​ 6）user-scalable ：用户是否允许缩放 yes/no 1/0

​ 屏幕像素（也叫物理像素，或像素点）：设备显示屏的最小可视颗粒

5，非主流适配方案特征：

​ 根据设备分辨率的不同，设置缩放比例不同,成本非常高

6，使用

1. 移动端可以使用jQuery，但是不建议

2. jQuery：做了很多桌面浏览器兼容问题，特别是IE，但是移动端没有IE

3. 移动端的主流浏览器有：谷歌，火狐，safari，qq，百度。。。。

   ​ 这些浏览器的特点：内核基本上都webkit 或者blink 兼容：-webkit-

4. ，可以使用h5的API，或者使用轻量级的jQuery库-----zepto.js------用法和jQuery用法一样

7，触摸事件

1）touch事件： 是移动端的触摸事件，是一组事件

1. touchstart：当手指触摸到屏幕的时候触发------只会触发一次

2. touchmove：当手指再屏幕中滑动时触发------一直触发

3. touchend：当手指离开屏幕时触发----------只会触发一次

4. touchcancel：被迫中止滑动时触发--------当来电 弹出消息

2）移动端添加事件 ： addeventlistener(dom对象,function事件处理函数,false是否冒泡)

3）事件参数对象2：名字：touchlist（触发点集合）

1. changedTouches：改变后的触摸点的集合

2. targeTouches：当前元素的触发点集合

3. touches:页面中所有触摸点的集合

4. 每一个事件都可以纪录触摸点，特例touchend事件：targetTouch和touches不被纪录

5. clientX,clientY:基于浏览器窗口（视口）

6. pageX，pageY：基于页面（视口）

7. screenX，screenY：基于屏幕

8，移动端的点击事件

click事件：一般不用，因为移动端的滑动，点击，click事件会延迟300ms

这样会影响用户体验，响应太慢了

理解移动端的手势事件：swipe

swipeLeft ：向左 swipeRight ：向右 swipeUp ：向上 swipDown：向下

解决方案：

• 使用tap事件，top：轻击

  说明：top事件不是移动端的原生事件，而是通过touch事件衍生过来的

  zepto.js：轻量级的jQuery库，里面封装了tap事件

  tap事件的条件：1，响应速度要比cilck快，响应速度小于150ms

  ​ 2，不能滑动（不能触发touchmove事件）

• 使用fastclick.js 提高了移动端click响应速度

  fastclick.js插件，下载使用