手机端知识总结

入门

屏幕概念

• 屏幕尺寸
  屏幕对角线的长度(单位是英寸,简称寸)
• 屏幕分辨率
  出场就固定的一个值,表示屏幕水平方向和垂直方向有多少个物理分辨率 750*1366
• 屏幕的像素密度
  dpi/ppi 每英寸屏幕有多少个像素点,这个值越高表示这个屏幕越清晰

像素概念

• 物理像素
  屏幕上的一个个像素点
• css像素
  指的是程序员在代码中写的px,比如css中width:100px
• 设备独立像素

在高清屏年代之前,一个css像素对应了一个物理像素,高清屏出现以后,一个css像素就再也不对应一个物理像素了
设备独立像素,决定了一个css像素对应多少个物理像素
设备分辨率出场就固定了,设备独立像素出厂也固定了
设备分辨率的水平值/设备独立像素水平值 ==> 像素比
像素比1: 一个css像素对应一个物理像素
像素比2: 一个css像素对应两个物理像素
像素比3: 一个css像素对应三个物理像素

• 在js中获取像素比

window.devicePixelRatio

图片高清显示

图片类型

位图:由位图像素组成
问题:放大会失真
原因:一个位图,如果在渲染的时候,一个位图像素被多个物理像素渲染就会失真

矢量图:不是由像素组成,是计算出来的,所以不会失真
制作成本高,所以页面中主要还是只用位图
一般在pc端不处理位图失真这个问题

移动端:由于有很多高清屏幕,所以导致位图在高清屏幕也会失真
解决:像素比为2的手机使用2倍图
像素比为3的手机使用3倍图
代码,使用媒体查询

@media screen and (-webkit-min-device-pixel-ratio: 2){
	使用2倍图
}

视口

• pc端视口

document.documentElement.clientWidth

// 获取视口,移动端视口会随着浏览器变化,视口多大,占满宽度就应该写多大

• 移动端视口
  布局视口:默认就是980,布局视口决定了移动端布局时,占满宽度应该写多少个像素

document.documentElement.clientWidth

视觉视口:就是用户看到的手机的可视区

理想视口:让布局的宽度等于当前设备独立像素的宽度,开启理想视口

<meta name="viewport" content="width=device-width, initial-scale=1.0">

缩放

• pc端缩放
  css不改变,改变的是视口,会影响布局
• 移动端缩放
  css不改变,布局视口不改变,改变的是视觉视口,不会影响布局

viewport

== width ==
布局视口的宽度,取值:;数字/device-width,device-width的值就是设备独立像素的宽度
写数字很多安卓机不支持

initial-scale 初始缩放比例
计算公式 设备独立像素宽度/布局视口==scale

maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户缩放 no 不允许用户缩放
viewport-fit 设置为cover值可以解决刘海屏的留白问题
注意: 如果width的值和initial-scale冲突了, 谁的值大听谁的

适配

viewport

<meta name="viewport" content="width=设计的宽度">

vw适配

自己计算比例 1vw=设备独立像素的百分之一

== rem适配 ==

方式一:
核心过程:1.根字体 = (设备横向独立像素值*100)/设计稿的宽度
编写样式时,直接以rem为单位 值为:设计值/100

方式二:
核心过程:
1.根字体=设备横向独立像素值/10
2.编写样式时,直接以rem为单位 值为:设计值/(设计稿的宽度/10)

边框1px的问题

问题:在高清屏幕上,1px可能会比较粗
解决:

• 媒体查询

@media screen and (-webkit-min-device-pixel-ratio:2){
  #demo{ 
   	 border: 0.5px solid black
   	 }
  }

• 用js来控制,可以一劳永逸
  1.正常适配
  2.边框1px不适配
  3.通过设置viewport的initial-scale,让布局视口变大,布局视口变大了,视图就变小了
  4.通过让根字体变大,让视图恢复原来的样子 这个时候,布局视口变大了,1px对应的就不是原来2个/3个物理像素,而是一个物理像素

移动端事件

四个事件

touchstart 手指触摸屏幕
touchmove 手指在屏幕上移动
touchend 手指离开屏幕
touchcancle 中断手指触摸屏幕

注意问题:在移动端,click比touchstart延迟约300ms
由于延迟出现了一个问题,点击穿透
点击穿透有四种解决方式,最简单的就是在touchstart中执行e.preventDefault(),那么touchstart之后click就不会触发了

事件对象身上属性

touches 屏幕上所有的触点
targetTouchse 元素上所有的触点
changeTouches 改变的触点,在touchend里面,可以通过changedTouches获取到离开屏幕的触点

在js中获取css样式

style只能获取行内样式
offset/client/scroll系列只能获取一些宽/高 样式
getComoutedStyle可以获取元素所有样式
getComputedStyle(元素)返回一个样式对象