Fork me on GitHub

移动端适配

发表于 | 分类于 | 本文总阅读量 次

移动端初探

web移动端由于设备的原因需要设配移动端我们需要了解适配移动端的相关知识

  • 4个像素
    • 物理像素
    • css像素
    • 独立像素
    • 位图像素
  • 3个视口
    • 布局视口
    • 视觉视口
    • 理想视口
  • 2个操作(PC端？移动端)
    • 放大
    • 缩小
  • 1个比例
    • 像素比

1.四个像素之间的关系

物理像素和设备独立像素:
像素比: 一个方向上占据一块屏幕所需要的物理像素的个数 /一个方向上占据一块屏幕所需要的设备独立像素的个数 =2;

物理像素和位图像素:
1:1的时候才能完美清晰的展示

  • 物理像素和css像素

    • 普通屏:1比1
    • 高清屏:
      • 加name为viewport的meta标签
        • 像素比
      • 没有加name为viewport的meta标签
        • 布局视口尺寸 / 屏幕的分辨率

  • css像素和设备独立像素

    • 没有加name为viewport的meta标签:没有关系
    • 加name为viewport的meta标签:可以认为css像素就是设备独立像素

注意@2x 和 @3x图的使用

2.布局视口和视觉视口

  • layout viewport:

    • 手机上，为了容纳为桌面浏览器设计的网站，默认的布局视口的宽度远大于屏幕的宽度
    • 布局视口的出现，在极大程度上帮助了桌面网站到移动设备上的转移。
    • 可以通过document.documentElement.clientWidth来获取
    • 在pc端，单独一个width为20%的元素最终拿到的值要根据初始包含块的width来决定，因为我们横向的布局都是按初始包含块开始填的，在移动端一样，不过我们这个时候应该叫它布局视口。

  • visual viewport:

    • 视觉视口语设备屏幕一样宽，并且它的css像素的数量会随用户的缩放而改变
    • visual viewport的宽度可以通过window.innerWidth 来获取，
    • 但在Android 2, Oprea mini 和 UC 8中无法正确获取。

3.理想视口

我们分析知道：布局视口的默认宽度并不是一个理想的宽度，对于我们移动设备来说，最理想的情况是用户刚进入页面时不再需要缩放。这就是为什么苹果和其他效仿苹果的浏览器厂商会引进理想视口！
只有是专门为移动设备开发的网站，他才有理想视口这一说。而且只有当你在页面中加入viewport的meta标签，理想视口才会生效。

1
<meta name="viewport" content="width=device-width" />

这一行代码告诉我们，布局视口的宽度应该与理想视口的宽度一致

4.css像素

  • css像素能代表一个设备的大小
  • 但是CSS像素的值是不确定的
  • 屏幕大小之间的比较应该使用绝对单位:屏幕尺寸

5.物理像素与css像素比例

  • 视觉视口(1.决定用户能看到什么；2.包住整个布局视口)

    • 物理像素:屏幕的分辨率
    • css像素: 布局视口尺寸

  • 加name为viewport的meta标签

    • 像素比
  • 没有加name为viewport的meta标签
    • 布局视口尺寸 / 屏幕的分辨率

6.像素比到底是什么

像素比: 一个方向上占据一块屏幕所需要的物理像素的个数 /一个方向上占据一块屏幕所需要的设备独立像素的个数

7.理想视口什么时候出现？ 像素比什么时候有用？

加name为viewport的meta标签

8.理想视口与设备之间的关系

理想视口的尺寸：设备独立像素所代表的值

  • 不同浏览器在同一设备上理想视口的尺寸可能会不一样
  • 一款浏览器在不同设备上理想视口的尺寸可能会不一样

9.思考视口的实质

本质上三个视口的物理尺寸就是屏幕尺寸
在不一样的情况下，各个视口所包含的css像素的个数是不一样的

  • 布局视口包含的css像素的个数

    • 980 1024 （浏览器不一样）

  • 视觉视口包含的css像素的个数

    • 默认情况（css像素和物理像素1:1）—> 屏幕的分辨率
    • 移动端浏览器初始化的时候（视觉视口必须要包住布局视口） —> 布局视口包含的css像素的个数就是视觉视口所包含的
    • 用户缩放（只影响视觉视口）
      • 放大—> 视觉视口包含的css像素的个数变少
      • 缩小—> 视觉视口包含的css像素的个数变多

  • 理想视口包含的css像素的个数

    • 设备独立像素所代表的值

10.缩放的影响

  • pc端的缩放:会改变元素的布局（布局视口）

  • 移动端（缩放只改变视觉视口内css像素的个数）

    • 放大

      • 使css像素变大，一个css像素所包含的物理像素的个数变多，元素变的更大
      • 视觉视口内，css像素的个数变少

    • 缩小

      • 使css像素变小，一个css像素所包含的物理像素的个数变少，元素变的更小
      • 视觉视口内，css像素的个数变多

11.怎么获取三个视口的值

  • 布局视口：document.documentElement.clientWidth(基本没有兼容性问题) ★
  • 视觉视口：window.innerWidth（有一点兼容性问题）
  • 理想视口：screen.width（兼容性问题极大）

12.完美视口以及meta标签

页面内有过大的元素META标签如下

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

13.会影响布局视口的操作

  • 1.修改meta内的width属性值(有兼容性问题)
1
<meta name="viewport" content="width=320,initial-scale=1.0"  />
  • 2.修改meta内的initial-scale属性值
1
<meta name="viewport" content="width=320,initial-scale=0.5"  />

14.等比问题(涉及适配)

  • 没有加name为viewport的meta标签
    • 一个相同css像素大小的区域在不同的设备是等比的,
      在不同的设备上占据的实际物理大小（英寸）不一样
  • 加name为viewport的meta标签
    • 一个相同css像素大小的区域在不同的设备是不等比的,
      在不同的设备上占据的实际物理大小（英寸）是一样的

  • 等比是一个必须的需求

  • 1.百分百还原设计图 —> 在不同设备上要等比(文字要完美清晰的展示)

  • 2.必须加meta标签 —>导致不等比
  • 3.适配 —>加上meta标签后也得等比

15.设配相关

15.1 rem适配

rem适配原理：改变了一个元素在不同设备上占据的css像素的个数

  • rem适配的优缺点:
    • 优点:没有破坏完美视口
    • 缺点:px值到rem的转换太复杂

15.2 viewport适配

viewport适配的原理：viewport适配方案中，每一个元素在不同设备上占据的css像素的个数是一样的,但是css像素和物理像素的比例是不一样的。

  • viewport适配的优缺点：
    • 优点:所量即所得
    • 缺点:没有使用完美视口

15.3 百分比适配

百分比适配的原理：css中都是用百分比来操作

  • 百分比适配的优缺点：
    • 优点:简单快捷
    • 缺点:不适合应用场景复杂的环境

15.4 适配的应用

  • 1.适配的方法使用按照实际的应用场景而定。
  • 2.适配方法是可以混用的。

16.实现1px = 1物理像素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*<meta name="viewport" content="width=device-width,initial-scale=1.0"/>*/
#test{
  height: 1px;
  width: 100%;
}
@media only screen and (-webkit-device-pixel-ratio:2 ) {
  #test{
    transform: scaleY(.5);
  }
}
@media only screen and (-webkit-device-pixel-ratio:3 ) {
  #test{
    transform: scaleY(.333333333333333333);
  }
}

17.全面阻止事件的默认行为

1
2
3
4
5
//x为移动端触摸事件	touchstart或者touchmove
document.addEventListener("x",function(ev){
  ev=ev||event;
  ev.preventDefault();
})

18.移动端跳转方案

事件点透:click会发生在点击的像素点的范围内如果没处理的话会触发该范围元素的默认点击行为及产生事件点透

click 事件在用户点击了一个元素时调用。 click 事件发生在 mousedown 和 mouseup 事件之后。移动端的触摸事件也会产生以上效果这就会导致事件点透的产生

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//移动端由于会产生s事件点透的存在所以要处理跳转的机制
document.addEventListener("touchstart",function(ev){
  ev.preventDefault();
})
var aNodes =document.querySelectorAll("a");
for(var i=0;i<aNodes.length;i++){
  aNodes[i].addEventListener("touchmove",function(){
    if(!this.flag){
      this.flag=true;
    }
})		
  aNodes[i].addEventListener("touchend",function(){
    if(!this.flag){
      window.location.href=this.href;
    }
    this.flag=false;
  })
}