web移动端开发必会知识点总结_移动web开发知识点汇总-优快云博客

一、理论

1、像素理论

屏幕尺寸
单位：英寸，1英寸=2.54厘米
指屏幕对角线的长度

物理像素和css像素
物理像素是屏幕物理分辨率，比如1920*1080，每个物理像素点称为1像素
css像素是逻辑像素，一般1px等于1个物理像素点
因为现在不同设备分辨率也不一样，而且现在很多设备采用了高清屏，所以我们设计css时要避免使用px，转而多使用vh，rem和百分比，这样就会适配物理像素，以上提到的各种单位统称为css像素
比如，两个手机都是3.5英寸的手机，但是普通屏幕像素是480* 320px，高清屏是960* 640px，这时就衍生了一个单位PPI
一般相同区域的像素点数，高清屏是普通屏4倍

PPI：像素密度或屏幕密度
屏幕上每英寸可以显示的像素点数量，单位是ppi
PPI与像素密度和屏幕分辨率有关

DPI每英寸像素点

在这里插入图片描述

设备独立像素（密度无关像素）
计算机坐标系中的一个点
这个点可以代表一个可以由程序使用的虚拟像素（比如css像素），然后由相关系统转换为物理像素
这个概念很重要，是我们日后css像素转换为物理像素的关键
可以把设备独立像素看成是不同设备提供出来的接口，它用来对接应用的一些概念，比如浏览器中的css像素
只有当浏览器厂商对接上设备独立像素时，浏览器厂商设计的移动端规则才能起作用，否则采用默认规则

位图像素
是栅格图像（png，jpg，gif等）的最小数据单元
只有1位图像素=1物理像素才能得到完美清晰的展示
不对应，会造成图片的失真，偏差越大，失真越严重

像素比DevicePixelRatio 简写为DPR
`同一个方向上占满屏幕的物理像素`/`同一个方向上占满屏幕的设备独立像素`
设备物理像素和独立像素的比例
DevicePixelRatio=物理像素/设备独立像素 (官方定义)
可以通过window.devicePixelRatio获取
通俗的讲就是同一个方向上占满屏幕的物理像素/同一个方向上占满屏幕的设备独立像素

在这里插入图片描述

如果iPhone6像素比为2，那么一个css像素占据多少个物理像素？

首先
	像素比=2
那么按照官方的定义
	物理像素/设备独立像素=2
	物理像素=2*设备独立像素
	
	非常容易混淆，这里它实际的意思是
		像素比=同一个方向上占满屏幕的物理像素/同一个方向上占满屏幕的设备独立像素
		物理像素= 2*横轴设备独立像素 * 2*纵轴设备独立像素
	此时
		你给物理像素不断的升倍，比如4*物理像素= 2*横轴设备独立像素 * 2*纵轴设备独立像素
		那么就表示 一个独立像素=4个物理像素
	这里如果你还不懂，往下看例子
如果
	物理像素为750*1334
    设备独立像素为375*667
	(以上这些都是厂商设定好的)
那么
	像素比 = 750/375 = 2 或1334/667 = 2 (同一个方向上占满屏幕的物理像素/同一个方向上占满屏幕的设备独立像素)
	1设备独立像素=4物理像素(因为像素比是2，先看横向750/375=2,再看纵向1334/667=2,2+2=4)
当我们
	写上meta标签后，并指定width=device.width
	这样css像素就和设备独立像素链接了起来
此时
	因为已经建立链接，那么设置css像素就会等同于设备独立像素
	又因为
		1设备独立像素=4物理像素
	即
		1个css像素占据iPhone6手机的4个物理像素

2、视口理论

布局视口
我们pc端的网页尺寸远远比手机尺寸大，那么手机浏览器肯定要有一个容器来装，这个容器叫布局视口

在这里插入图片描述

视觉视口
就是你通过手机屏幕看到的，你看到的内容是多少像素，这个视觉视口的大小就是多少，而布局视口一直不变，手机出厂的时候就固定了

在这里插入图片描述

总结布局视口和视觉视口
布局视口决定你的页面布局，它永远就是一个固定的像素，页面尺寸超过，就看不到或者换行
视觉视口决定你能看到的内容，你所能看到的内容决定他的尺寸，它会随着你的缩放进行改变
布局视口的物理尺寸就是设备屏幕的尺寸
`布局视口`的`物理尺寸`中`包含`的`css像素`的个数是`固定`的
`视觉视口`的`物理尺寸`中`包含`的·css像素`的个数是`不固定`的
用户`没有缩放`的情况下，`视觉视口`的`物理尺寸等于布局视口`的`物理尺寸`
`视觉视口可以完整的包住布局视口`
视觉视口决定了物理像素和css像素的比例，因为缩放会放大页面，此时更少的css像素填充了物理像素

理想视口
布局视口的默认宽度不是一个理想的宽度，对于我们移动设备来说，最理想的情况是
用户刚进入页面时不需要缩放，但只有专门为移动设备开发的网站，才有理想视口这一说
只有页面中加入viewport的meta标签，理想视口才能生效
< meta name=“viewport” content=“width=device-width,initial-scale=1.0”>
上面的代码表示布局视口的宽度应该与理想视口保持一致，并且初始缩放为1
理想视口包含的css像素个数等于独立设备像素值
定义理想视口是浏览器厂商的工作，不同浏览器有不同的理想视口
浏览器理想视口大小取决于设备，同一款浏览器在不同设备上的理想视口不同

3、获取视口尺寸

一、pc端，只有一个视口，它会随着你的放大缩小而改变，影响布局
	document.documentElement.clientWidth //获取视口宽度
	document.documentElement.clientHeight//获取视口高度
二、移动端（以下都是获取宽度，获取高度将Width换成Height即可）
	//布局视口，移动端，无论你怎么放大缩小，这个视口的大小永远不变
	var layout = document.documentElement.clientWidth;//layout(布局视口)的宽度，没有兼容性问题
	var visual = window.innerWidth;//visual(视觉视口)的宽度，接近全部支持
	var dream = screen.width;//一半代表理想视口的宽度，一半代表设备的分辨率! !有很大的兼答性问题

4、viewport详解

完美视口+不让用户缩放，以后直接来复制这个就可以了

<meta name = viewport" content "width=device-width,height=device-height,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />

在这里插入图片描述

5、等比问题

一个60*36的图片，想要放在DPR=2的设备上，应该用多大的css容器包裹呢？
因为一张图片最好的样子是一个物理像素显示一个位图像素，所以我们需要通过计算，让一个css容器的大小尽量使图片每一个位图像素对应一个物理像素

首先根据像素理论，DPR = 物理像素/设备独立像素
	因为我们开发移动端都会将css绑定到设备独立像素上，所以css像素等于设备独立像素
	则：css像素=物理像素/DPR
	那么我们需要的物理像素是60*36，已知DPR=2,则css容器像素为
		css像素=60/2  ==》 30
		css像素=36/2  ==》 18
	最终，我们应该使用
		30*18的容器来包裹这张图片

那么这时候你会问，那如果DPR=2的设备，物理像素有的少有的多怎么办
	DPR=2的设备，我们统一采用iPhone6来作为设计初稿，因为是最标准的
	而其它DPR=2的设备都比iPhone6小，我们就不用担心了，图片不会失真，只会锐化，基本看不出来
那如果是DPR=3的呢？
	这时候就需要重新设计了，一般设计师会将图片设计两套，一个是给DPR=2的设备用的，一个是给DPR=3的设备用的
	因为DPR=3的设备比iPhone6大，图片就会失真了

	一样的通过公式来算
		css像素 = 物理像素/DPR
		css像素 = 60/3,css像素 = 36/3

通过规律可以发现
	DPR=2的设备想要让图片完美显示，只需要设置容器大小为图片的一半，60*36的图片，设置css容器为30*18
	DPR=3的设备就是三分之一，60*36的图片，设置css容器为20*12

二、适配

1、rem适配方案

em和rem
em：是自身的font-size大小，1em=自身font-size，如果你设置font-size=10px，那么1em=10px
rem：是根标签的font-size大小，1rem=根标签font-size

rem有什么用
我们需要在不同尺寸移动端设备上还原设计稿比例，那么就得给每一个移动设备设置一套尺寸，因为涉及到像素比和物理像素
而有了rem，我们只需要为不同尺寸的移动端设置不同的font-size(根标签的)，就可以达到对应的尺寸
优点：完美视口，体验好
缺点：像素与rem转换太过复杂

谷歌览器字体尺寸
谷歌浏览器默认大小16px，最小12px
ie6所有元素最小就是16px，非常麻烦，最好的解决办法，就是设置如果是ie6就设置font-size:0;
但是这样也只能最小到2px，而永远到不了1px

rem适配,使用`1rem`直接让容器的`宽度`在不同设备上都正好填满屏幕
直接换不同设备查看效果时，要记得刷新，否则无法获取，因为我js使用的是onload事件
对于实际开发我们经常取`document.documentElement.clientWidth/16`来适配

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
			}
			div{
				width: 1rem;
				height: 1rem;
				background-color: #09D5FC;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			let html = document.querySelector("html")//获取根标签
			/* 
				document.documentElement.clientWidth ==> 获取布局视口宽度，也就是当前设备的独立像素
				
				我们知道视觉视口会默认直接显示布局视口,所以我们将fontSize设置为布局视口宽度
				1rem 就正好填满当前设备屏幕
			 */
			html.style.fontSize = document.documentElement.clientWidth+"px"
		}
	</script>
</html>

实战中使用的rem适配

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
			}
			div{
				width: 16rem;
				height: 1rem;
				background-color: #09D5FC;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
	<script type="text/javascript">
		(function(){//回调
			
			let styleNode = document.createElement("style");				//创建一个style结点
			let width = document.documentElement.clientWidth/16;			//获取布局视图宽度的16分之一
			styleNode.innerHTML = "html{font-size:"+width+"px;!important}";	//给style结点添加一条样式，此样式不可被覆盖
			document.head.appendChild(styleNode)							//将节点添加到head标签的最下面
		})()
	</script>
</html>

2、viewport适配方案

只要实现将任何设备的布局视口的宽度调整为设计稿的宽度就达到了适配
优点：简单，所量即所得
缺点：没有完美视口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width" /><!-- 1、在这里声明viewport，设置width，这样就可以通过document.documentElement.clientWidth 获取视口宽度 -->
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
			}
			div{
				width: 750px;
				height: 1rem;
				background-color: #09D5FC;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
	<script type="text/javascript">
		(function(){//回调
			
			let targetWidth = 750;/* 2、设置设计稿尺寸 */
			let scale = document.documentElement.clientWidth/targetWidth;/* 3、通过视口宽度/设计稿尺寸，就可以获取缩放比例 */
			
			let meta = document.querySelector("meta[name='viewport']");/* 4、获取meta标签 */
			/* 5、设置content缩放，注意这里覆盖了meta标签的content值，此适配方案不可以设置width=device-width */
			meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";
		})()
	</script>
</html>

剩下百分比适配，或者主体内容固定，其它流体布局这种适配方案，就太简单了，而且效果也不太好

三、1物理像素实现

1、通过dpr缩放，使用rem来规定1px=1物理像素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0" /><!-- 1、在这里声明viewport，设置width，这样就可以通过document.documentElement.clientWidth 获取视口宽度 -->
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 16rem;
				height: 1px;
				margin-top: 1rem;
				background-color: black;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
	<script type="text/javascript">
		(function(){//回调
			
			let dpr = window.devicePixelRatio || 1;/* 2、获取dpr，设备像素比，如果没有就设置为1 */
			
			let styleNode = document.createElement("style");/* 2、获取style结点 */
			
			let width = document.documentElement.clientWidth*dpr/16; /* 3、获取物理像素 ，视口宽度（设备独立像素）*dpr =  设备物理像素 */
			
			styleNode.innerHTML="html{font-size:"+width+"px !important}";/* 4、设置根标签字体大小 */
			
			document.head.appendChild(styleNode);/* 5、将style结点添加到head标签中 */
			
			let scale = 1/dpr;/* 6、通过dpr获取缩放比例 */
			
			let meta = document.querySelector("meta[name='viewport']");/* 4、获取meta标签 */
			
			/* 5、设置content缩放 ,拥有完美视口*/
			meta.content="width=device-width,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";
			
			/* 此时，1px等于所有设备的1物理像素 */
		})()
	</script>
</html>

2、通过@media来适配，这种就是典型的为了适配写多套样式，也是最简单，但是最麻烦的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 100%;
				height: 1px;
				margin-top: 1rem;
				background-color: black;
			}
			@media only screen and (-webkit-device-pixel-ratio:2){/* 如果设备像素比为2，就使用这套样式*/
				div{
					transform: scaleY(.5);/* 像素比为2，就给css像素/2，就得到对应物理像素 */
				}
			}
			@media only screen and (-webkit-device-pixel-ratio:3) {/* 像素比为3的时候 */
				div{
					transform: scaleY(.3333333333333333);/* 像素比为3，就给css像素/3，得到对应物理像素 */
				}
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

四、移动端事件

1、获取dom节点

<script type="text/javascript">
		/* 1、通过选择器获取，获取到结点都是静态的 */
		let div = document.querySelector("#div");
		let divList = document.querySelectorALL("div");
		/* 2、通过类获取,这个是动态的，也就是你在它之后用js添加元素,是可以动态更新获取的，但是上面两个都不行 */
		let divByClass = document.getElementsByClassName(".div");
		// let divByID = document.getElementById();这个也是动态的
		
		/* 3、因为通过选择器获取非常方便，所以我们可以在js添加元素之后，手动再获取一次 */
		divList = document.querySelectorAll("div");
	</script>

2、触屏事件

<script type="text/javascript">
		/* 
		touchstart	手指触摸事件					mousedown 	鼠标按下事件
		touchmove	手指滑动事件不可以单独触发		mousemove 	鼠标移动事件可以单独触发
		touchend	手指抬起事件					mouseup 	鼠标抬起事件*/
		
		window.onload=function(){
			let div = document.querySelector(".div");
			/* 通过dom绑定事件，不推荐，因为有很多不兼容
			
			div.ontouchstart=function(){
				console.log("手指触摸事件")
			}
			div.ontouchmove=function(){
				console.log("手指滑动事件")
			}
			div.ontouchend=function(){
				console.log("手指放开")
			} */
			
			/* 通过addEventListener绑定（推荐） */
			div.addEventListener("touchstart",function(){
				console.log("手指触摸事件")
			})
			div.addEventListener("touchmove",function(){
				console.log("手指滑动事件")
			})
			div.addEventListener("touchend",function(){
				console.log("手指放开")
			})
		}
	</script>

移动端经常出现长按的情况，这时会选中文字然后触发不必要的事件，为了避免可以禁用默认事件

<script type="text/javascript">
		/* 
		touchstart	手指触摸事件					mousedown 	鼠标按下事件
		touchmove	手指滑动事件不可以单独触发		mousemove 	鼠标移动事件可以单独触发
		touchend	手指抬起事件					mouseup 	鼠标抬起事件*/
		
		window.onload=function(){
			let div = document.querySelector(".div");
			/* 通过addEventListener绑定 */
			div.addEventListener("touchstart",function(ev){
			
				ev = event||ev;
				ev.preventDefault()/* 禁用默认事件，这样长按文字就无法选中了 */
				
				console.log("手指触摸事件")
			})

			/* 下面这个是全面禁止默认事件行为，单独禁止和全面禁止，视不同情况而定，模拟器会报错，但是真机不会 */
			document.addEventListener("touchstart",function(ev){
				ev = event||ev;
				ev.preventDefault()/* 禁用默认事件，这样长按文字就无法选中了 */
				console.log("手指触摸事件")
			})
	</script>

3、多指列表

<script type="text/javascript">
		window.onload=function(){
			/* 
				//changedTouches:触发当前事件的手指列表
				//targetTouches:触发当前事件时元素上的手指列表
				//touches:触发当前事件时屏幕上的手指列表
			 */
			let div = document.querySelector(".div");
			
			/* 下面这个是全面禁止默认事件行为，单独禁止和全面禁止，视不同情况而定，模拟器会报错，但是真机不会 */
			div.addEventListener("touchstart",function(ev){
				ev = event||ev;
				ev.preventDefault()/* 禁用默认事件，这样长按文字就无法选中了 */
				console.log("触发当前事件手指多少根",ev.changedTouches.length)
				console.log("触发当前事件时元素上手指多少根",ev.targetTouches.length)
				console.log("触发当前事件屏幕上有多少根手指",ev.touches.length)
			})
		}
	</script>

4、移动端常见问题

1、禁用点击电话号，邮箱自动拨号和跳转

<!--不要默认跳转电话号和邮箱-->
<meta name="format-detection" content="telephone=no,email=no"/>
<!--上面禁用了，但是我们页面中要是有需要使用电话号跳转的功能怎么办？用a标签就可以，具体看下面例子-->
<a href="tel:110">110</a>
<a href="mailto:95656@qq.com">95656@qq.com</a>

2、解决移动端加圆角按钮直接变成圆

<style type="text/css">
	input{
		width: 50px;
		height: 50px;
		border-radius: 5px;
		-webkit-appearance: none;/* 解决按钮变圆 */
	}
</style>
<input type="button" value="按钮" />

3、font boosting，解决移动端觉得字太小自动帮你放大的问题

p{
	font-size:24px;
	max-height:999999px;/*解决问题*/
}

4、禁用长按选中文字功能

.txt {/* 禁用长按文字选中功能 */
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}