移动端笔记

Posted 2020-09-29 钢铁小坦克

1、像素比：

点、points （抽象单位 ） 
像素渲染 （栅格化） 
物理像素 （调整大小） 
dpi、ppi 
获取像素比 （window.devicePixelRatio） 

2、viewport（视口）

width 设备宽度 [pixel_value | device-width] 
user-scalable 是否允许缩放 （no||yes） 
initial-scale 初始比例 
minimum-scale 允许缩放的最小比例 
maximum-scale 允许缩放的最大比例 
target-densitydpi (已淘汰) 

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" />

同时设置initial-scale和minimum-scale、maximum-scale的值都相同，双保险兼容。

根据不同设备JS动态控制比例 1/像素比：动态生成viewport

<script>

//获取设备的像素比

//console.log(window.devicePixelRatio);

 

//控制比例:1/像素比

var pixelRatio = 1 / window.devicePixelRatio;

 

//通过js动态设置视口(viewport)

document.write(‘<meta name="viewport" content="width=device-width,initial-scale=‘+pixelRatio+‘,minimum-scale=‘+pixelRatio+‘,maximum-scale=‘+pixelRatio+‘" />‘);

</script>

3、单位比较

1）px 绝对（固定）单位
缺点：任何情况下都是固定值，会导致布局在不同尺寸的设备下错位
2）%相对单位（会有影响发生变化） 相对于父级（自身）大小进行计算
缺点：能确定范围的还是比较好计算的，对于不太好确定值的地方不好使用百分比。并且，会导致变形。
3）em 相对单位（会有影响发生变化） em = 当前字体大小
缺点：会根据当前容器字体大小发生变化，假如每个容器字体大小不一致，那么计算会非常麻烦。

4）rem 相对单位：1rem=设置html的字体大小。只依赖于html字体大小。r = root、em = 字体大小 font size。

动态设置rem，适配所有移动设备：

<script>

// 条件：尺寸越大，则字体大小越大。尺寸越小，则字体大小越小。

 

// 获取html节点

var html = document.getElementsByTagName(‘html‘)[0];

 

// 获取屏幕宽度

var pageWidth = html.getBoundingClientRect().width;

//或者通过document.documentElement.clientWidth获取宽度

 

// 设置html的font-size大小：屏幕宽度 / 固定数值 = 基准值（基准值任何整数都行）

html.style.fontSize = pageWidth / 16 + "px";

</script>

 

 

横竖屏适配：

 

setRem();

window.addEventListener("orientationchange", setRem); //手机适配事件

window.addEventListener("resize", setRem); //方便chrome查看

function setRem() {

var html = document.querySelector("html");

var width = html.getBoundingClientRect().width;

html.style.fontSize = width / 16 + "px";

}

4、布局步骤

1）确定尺寸（设计稿） 并且还得在符合该尺寸的模拟器下进行第一次预览
2）搭建大体框架


1）[固定定位]元素内容中有[input]的话，会导致触发键盘之后导致固定定位错位。(换成绝对定位解决)

2）不管使用背景图还是img，一定要调整对应的size（大小）

如果图片大小和容器大小一致，那么可以使用100%

如果图片大小和容器带下不一样，那么需针对图片分别设置宽/高、x/y

3）碰到文字，一定要测量行高，不然高度会不准确

4）标签的特性需要熟记于心

5、标签兼容：

1)固定定位fixed不兼容，为实现position：fixed：

设置html的overflow为hidden，隐藏滚动条
设置body的overflow为auto，把滚动条给body
html{

width: 100%;

height: 100%;

overflow: hidden;

}
body{

width: 100%;

height: 100%;

overflow: auto;

}
header{

width:100%

height:xxrem;

position:absolute;

top:0;

left:0;

}

2)取消a标签手指按下时出现的黑色遮罩层

a,input,button{

-webkit-tap-highlight-color: transparent;

text-decoration: none;

}

3) 解决ios下的表单元素圆角的问题
input,button{

-webkit-appearance: none;

margin: 0;

padding: 0;

border: none;

}

 

4)iPhone 和 android 的浏览器纵向 (Portrate mode) 和橫向 (Landscape mode) 模式皆有自动调整字体大小的功能。

控制它的就是 CSS 中的 -webkit-text-size-adjust。

text-size-adjust 设为 none 或者 100% 关闭字体大小自动调整功能.

-webkit-text-size-adjust: 100%;

 

5) 兼容的字体：

 

font-family: Helvetica;

6、移动端基本事件：

touchstart 手指触摸 == mousedown 
touchend 手指抬起 == mouseup
touchmove 手指移动 == mousmove

1）touch事件 在 chrome的模拟器下，部分版本 通过on的方式来添加事件无效

var box = document.querySelector(".box");
box.ontouchstart = function () {

this.style.background = "blue";

};

解决方法：addEventListener("事件名",函数,冒泡或捕获);
不会存在前后覆盖问题
在chrome的模拟器下可以一直识别

box.addEventListener(
"touchstart",
function() {
console.log(2);
}
);

box.addEventListener(
"touchstart",
fn
);
function fn() {
console.log(3);
}


2）
冒泡 ：点击元素 他会把这个事件一直向上传递 从下向上传递
捕获 ：从上向下传递

var box = document.querySelector(".box");
box.addEventListener(
"touchstart",
function(ev) {
console.log(ev);
},
false
);

3）阻止页面上的文字选中和系统菜单

document.addEventListener(
"touchstart",
function(e) {
e.preventDefault();
}
);

/*
e.preventDefault(); 阻止默认事件

阻止掉：document touchstart的默认事件，可以解决一下问题：
1. 阻止页面上的文字被选中 -- 可以通过阻止冒泡使某个元素上的文字被选中
2. 阻止页面上的系统菜单

隐患:
页面上的所有滚动条失效


*/

window.onload = function () {

var box = document.querySelector(".box");

var div = document.querySelector(".div")

 

div.addEventListener( //div中的文字可以被选中

"touchstart",

function(e) {

e.stopPropagation();

},

false

);

/*

事件函数中 默认的第一个 参数 是 event对象

*/

};

4）阻止系统默认的下拉回弹效果

阻止 document的 touchstart 或者 touchmove，可以清除系统默认的回弹

document.addEventListener(

"touchmove",

function(e) {

e.preventDefault();

}

);

5）事件点透问题：

<a href="http://www.baidu.com">百度</a>
<div id="div"></div>

<script>

document.addEventListener(

"touchmove",

function(e) {

e.preventDefault();

}

);

window.onload = function () {

var div = document.querySelector("#div");

/*

PC端鼠标事件 在移动端也可以正常使用，但是注意 事件的执行 会有300ms的延迟

 

事件点透：

1. 在移动端 PC事件(click,mouse..) 有 300ms的延迟

2. 我们点击了页面之后，浏览器会记录点击下去的坐标

3. 300ms后，在该坐标找到现在在这的元素 执行事件

解决办法：

1. 阻止默认事件 (部分安卓机型不支持)

2. 不在移动端使用鼠标事件，不用a标签做页面跳转

*/

div.addEventListener(

"touchend",

function (e) {

e.preventDefault();

this.style.display = "none";

}

);

};

</script>


6）防止手指误触点击a链接、也是解决事件点透的方法


document.addEventListener(

"touchstart",

function(e) {

e.preventDefault();

}

);
window.onload = function () {

var a = document.querySelectorAll("a");

for(var i = 0; i < a.length; i++) {

a[i].addEventListener(

"touchmove",

function() {

//在进行touchmove事件的时候设置自定义事件isMove为true

this.isMove = true;

}

);

a[i].addEventListener(

"touchend",

function() {

//当不在进行touchmove事件的时候

if(!this.isMove) {

window.location.href = this.href;

}

this.isMove = false;

}

);

}

};


7、touches、targetTouches、changedTouches

touches 当前屏幕上的手指列表 （一个手指数组长度为1）
targetTouches 当前元素上的手指列表
changedTouches 触发当前事件的手指列表（离开时触发）

获取手指所触发事件时的坐标：
var box = document.querySelector("#box");

box.addEventListener(

"touchmove",

function (e){

var touch = e.changedTouches[0];

this.innerHTML = touch.pageX +"|"+ touch.pageY;

}

);

8、滑屏操作：

<style>

html {

height: 100%;

}

body {

margin: 0;

height: 100%;

position: relative;

overflow: hidden;

}

#wrap {

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

}

#scroll {

position: absolute;

left: 0;

top: 0;

width: 100%;

background: #ccc;

}

</style>
<script>
/*
1.手指按下去的时候，记录下手指坐标
2.移动的时候，记录手指坐标 
3.用移动后的坐标 - 移动前的坐标 = 手指 移动的距离
4.手指按下去的时候，记录下元素的位置
5.移动之后，元素的初始位置+用手指移动的距离 = 元素现在所要在的位置

*/
window.onload = function () {
var wrap = document.querySelector("#wrap");
var scroll = document.querySelector("#scroll");
var startPoint = 0;
var startEl = 0;
//外面盒子的可视高度减去里面盒子的原本高度
var maxTop = wrap.clientHeight - scroll.offsetHeight;
//console.log(maxTop); maxTop是个负值
wrap.addEventListener(
"touchstart",
function(e) {
var touch = e.changedTouches[0];
startPoint = touch.pageY;
startEl = scroll.offsetTop;//元素的初始位置
}
);
wrap.addEventListener(
"touchmove",
function(e) {
var touch = e.changedTouches[0];
var nowPoint = touch.pageY;
var dis = nowPoint - startPoint;
var top = startEl + dis;
if(top > 0) {
top = 0;
}
if(top < maxTop) {
top = maxTop;
}
scroll.style.top = top +"px";
}
);
};
</script>
</head>
<body>
<div id="wrap">

<div id="scroll">

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>

</div>

</div>
</body>
</html>