移动端笔记
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>
点、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]的话,会导致触发键盘之后导致固定定位错位。(换成绝对定位解决)
4、布局步骤
1)确定尺寸(设计稿) 并且还得在符合该尺寸的模拟器下进行第一次预览
2)搭建大体框架
1)[固定定位]元素内容中有[input]的话,会导致触发键盘之后导致固定定位错位。(换成绝对定位解决)
2)不管使用背景图还是img,一定要调整对应的size(大小)
如果图片大小和容器大小一致,那么可以使用100%
如果图片大小和容器带下不一样,那么需针对图片分别设置宽/高、x/y
3)碰到文字,一定要测量行高,不然高度会不准确
4)标签的特性需要熟记于心
5、标签兼容:
1)固定定位fixed不兼容,为实现position:fixed:
5、标签兼容:
1)固定定位fixed不兼容,为实现position:fixed:
设置html的overflow为hidden,隐藏滚动条
设置body的overflow为auto,把滚动条给body
html{
width: 100%;height: 100%;overflow: hidden;
}
body{
body{
width: 100%;height: 100%;overflow: auto;
}
header{
header{
width:100%height:xxrem;position:absolute;top:0;left:0;
}
2)取消a标签手指按下时出现的黑色遮罩层
a,input,button{
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);
}
);
解决方法: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(
4)阻止系统默认的下拉回弹效果
阻止 document的 touchstart 或者 touchmove,可以清除系统默认的回弹
document.addEventListener(
"touchmove",function(e) {
e.preventDefault();
}
);
5)事件点透问题:
<a href="http://www.baidu.com">百度</a>
<div id="div"></div>
<script>
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(
6)防止手指误触点击a链接、也是解决事件点透的方法
document.addEventListener(
"touchstart",function(e) {
e.preventDefault();
}
);
window.onload = function () {
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");
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>
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.移动之后,元素的初始位置+用手指移动的距离 = 元素现在所要在的位置
<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">
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>
</body>
</html>