移动web开发主要就是流式布局+viewprot
流式布局：就是百分比布局，非固定像素，内容向两侧填充，理解成流动的布局，称为流式布局
视觉窗口：视觉窗口：viewport,是移动端特有。这是一个虚拟的区域，承载网页的。
承载关系：浏览器---->viewport---->网页
适配要求
标准适配方案：
1. 网页宽度必须和浏览器保持一致
2. 默认显示的缩放比例和PC端保持（缩放比例1.0）
3. 不允许用户自行缩放网页
满足这些要求达到了适配，国际上通用的适配方案，标准的移动端适配方案。
适配设置：
如果任何设置都没有，默认走的就是viewport的默认设置
去设置新的viewport设置,达到适配要求。
<meta name="viewport"> 设置视口的标签 在head里面并且应该紧接着编码设置
viewport的功能：
1. width 可以设置宽度 (device-width 当前设备的宽度)
2. height 可以设置高度
3. initial-scale 可以设置默认的缩放比例
4. user-scalable 可以设置是否允许用户自行缩放
5. maximum-scale 可以设置最大缩放比例
6. minimum-scale 可以设置最小缩放比例
在<meta name="viewport" content="" > content="" 使用以上参数
1. width=device-width 宽度一致比例是1.0
2. initial-scale=1.0 宽度一致比例是1.0
3. user-scalable=no 不允许用户自行缩放 （yes，no 1,0）
标准适配方案：
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
在webstorm中的快捷方式：meta:vp + tab
非主流适配方案（淘宝）：
1.页面的真实尺寸会比在设备的上尺寸要大几倍
2.假设设备是iphone4 -> 320px -> 网页尺寸 640px
3.缩放操作，有2倍的 有3倍 和屏幕像素比有关系
4.什么是屏幕像素（物理像素，像素点） px(页面的尺寸单位)
5.物理像素 是设备显示屏的最小可视颗粒的大小 以前的手机（直板手机）
6.现在有 高清显示屏 视网膜屏 retina屏
7.显示的效果就提高了更细腻，但是在显示同等质量的图片的时候（模糊效果）
8.在屏幕像素比（一个px宽的屏幕能放几个物理像素）高的设备 图片（非矢量）显示会模糊
9.提高网页的清晰度 根据屏幕的像素比 来缩放网页
10.但是这样的适配方案成本非常高
11.一般的企业开发当中使用的还是标准化设置
在高清显示屏当中：图片可能会失真（模糊）
注意：
1、初始化问题：因为移动端以流式布局为主，是百分比布局，非固定像素布局，无法准确计算出容器尺寸。所以一般都会加上box-sizing:border-box.。（防止内容溢出 不出现滚动条 提供用户体验）
2、图片 下间隙问题:（三种方式）：
body{
/*font-size: 0px;*/
}
/*img{
display: block;
}*/
img{
vertical-align: middle;
}3、清除点击高亮效果：
tap-highlight-color：transparent;
-webkit-tap-highlight-color：transparent;4、在移动web的开发中建议使用H5的api 或者说使用一个 叫做： zepto.js 的库
移动端常见的事件
1、触摸事件touch（滑动）
touch是移动端的触摸事件 而且是一组事件, 利用touch相关事件实现移动端常见滑动效果和移动端常见的手势事件
- touchstart 当手指触摸屏幕的时候触发
- touchmove 当手指在屏幕来回的滑动时候触发
- touchend 当手指离开屏幕的时候触发
- touchcancel 当被迫终止滑动的时候触发（来电，弹消息）
如何使用touch:
1.绑定事件：box.addEventListener('touchstart',function () { });
2.事件对象：
名字：TouchList------触摸点（一个手指触摸就是一个触发点，和屏幕的接触点的个数）的集合
- changedTouches 改变后的触摸点集合
- targetTouches 当前元素的触发点集合
- touches 页面上所有触发点集合
3.触摸点集合在每个事件触发的时候会不会去记录触摸
- changedTouches 每个事件都会记录
- targetTouches，touches 在离开屏幕的时候无法记录触摸点
4.分析滑动实现的原理：
- 就是让触摸的元素随着手指的滑动做位置的改变
- 位置的改变：需要当前手指的坐标
- 在每一个触摸点中会记录当前触摸点的坐标 e.touches[0] 第一个触摸点
- clientX clientY 基于浏览器窗口（视口）
- pageX pageY 基于页面（视口）
- screenX screenY 基于屏幕
2、手势事件：
就是利用原生touch事件，判断滑动距离、方向来封装某一函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Title</title>
<style>
body {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
background: pink;
float: left;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
window.onload = function () {
/*1. 理解移动端的手势事件*/
/*2. swipe swipeLeft swipeRight swipeUp swipeDown */
/*3. 左滑和右滑手势怎么实现*/
var bindSwipeEvent = function (dom,leftCallback,rightCallback) {
/*手势的条件*/
/*1.必须滑动过*/
/*2.滑动的距离50px*/
var isMove = false;
var startX = 0;
var distanceX = 0;
dom.addEventListener('touchstart',function (e) {
startX = e.touches[0].clientX;
});
dom.addEventListener('touchmove',function (e) {
isMove = true;
var moveX = e.touches[0].clientX;
distanceX = moveX - startX;
});
dom.addEventListener('touchend',function (e) {
/*滑动结束*/
if(isMove && Math.abs(distanceX) > 50){
if(distanceX > 0){
rightCallback && rightCallback.call(this,e);
}else{
leftCallback && leftCallback.call(this,e);
}
}
/*重置参数*/
isMove = false;
startX = 0;
distanceX = 0;
});
}
bindSwipeEvent(document.querySelector('.box'),function (e) {
console.log(this);
console.log(e);
console.log('左滑手势');
},function (e) {
console.log(this);
console.log(e);
console.log('右滑手势');
});
}
</script>
</body>
</html>3、tap事件
移动端也有click事件 （在移动为了区分是滑动还是点击，click点击延时300ms）
影响用户体验 响应太慢了。
解决方案：
- 使用tap事件（不是移动端原生事件，通过touch相关事件衍生过来）
- 使用一个叫：fastclick.js 提供移动端click响应速度的 fastclick.js插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Title</title>
<style>
body {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
background: pink;
float: left;
}
</style>
</head>
<body>
<div class="box"></div>
<script src="../js/fastclick.min.js"></script>
<script>
/*当页面的dom元素加载完成*/
document.addEventListener('DOMContentLoaded', function() {
/*初始化方法*/
FastClick.attach(document.body);
}, false);
/*正常使用click事件就可以了*/
</script>
<script>
window.onload = function () {
/*使用tap事件*/
/*1. 响应的速度比click要快 150ms */
/*2. 不能滑动*/
var bindTapEvent = function (dom, callback) {
/*事件的执行顺序*/
/*在谷歌浏览器模拟看不到300ms的效果*/
/*在真机上面才能看看到延时效果*/
var startTime = 0;
var isMove = false;
dom.addEventListener('touchstart', function () {
//console.log('touchstart');
startTime = Date.now();
/*Date.now();*/
});
dom.addEventListener('touchmove', function () {
//console.log('touchmove');
isMove = true;
});
dom.addEventListener('touchend', function (e) {
//console.log('touchend');
console.log((Date.now() - startTime));
if ((Date.now() - startTime) < 150 && !isMove) {
callback && callback.call(this, e);
}
startTime = 0;
isMove = false;
});
/*dom.addEventListener('click',function () {
//console.log('click');
});*/
}
bindTapEvent(document.querySelector('.box'), function (e) {
console.log(this);
console.log(e);
console.log('tap事件')
});
}
</script>
</body>
</html>4、iscroll.js区域滚动效果
使用条件：一个容器装着一个容器html结构
window.onload=function () {
/*区域滚动效果 条件：子容器大于父容器*/
/*条件：一个容器装着一个容器html结构*/
/*找到最大容器*/
new IScroll(document.querySelector('.jd_cateLeft'),{
scrollX:false,
scrollY:true
});
new IScroll(document.querySelector('.jd_cateRight'),{
scrollX:false,
scrollY:true
});
}
扫一扫
403
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
