小白都能看明白的移动端viewport详解

小白都能看明白的移动端viewport详解

---

发现问题

当我们在pc端写下一个盒子，观察他在pc端、移动端的渲染情况（有些编辑器默认加上了viewport标签适配，请将他注释掉，文中会解释他的用处）

* {
	margin: 0;
	padding: 0;
}

#box {
	width: 300px;
	height: 300px;
	background-color: #008000;
}

<div id="box"></div>

• pc端
  
• 移动端
  
• 不难发现在移动端盒子整体缩小了(两张截图大小相等)，这是为什么呢？

1. 移动端的默认基础

---

1.1 缩放大小

手机访问电脑版的网页，为了让访问者对于网页有一个整体有一个整体的感受，会自动缩放电脑版的网页大小，让访问者能看到全部的内容

• 比如说我们打开stylus的官网，然后在转化到移动端，就会发现上述所说的效果：在移动端看到了网页的全貌

1.2 移动端默认视口大小

在很多情况下，我们通常会把html根标签的宽度看做视口的大小，让我们选中根标签，观察一下pc端和移动端的视口大小

pc端

• 我们把浏览器的窗口全屏，看到他的宽度为1920也就是屏幕的窗口大小，，有些童鞋看到的并不是和我一样的数值，可能是因为屏幕分辨率的原因，也有可能是系统进行了缩放
• 在桌面右击 => 显示设置 => 分辨率，就可以调整分辨率和缩放

移动端

• 我们发现移动端显示的是980,iphone和其他安卓机的宽度都一样移动端默认视口的宽度是980px
• 为什么会是980呢，这其实是设计者觉得PC网站大多都不超过980px，所以讲移动端的视口宽度设计成了980px

2. 像素

---

无论移动端还是pc端像素其实分为两种

1. 物理像素
2. CSS像素

由于刚刚相同像素大小的盒子，在移动端端和pc端渲染出来的真实大小是不同，为什么会这样我们还需要深入讨论两个像素

2.1 物理像素

---

什么是物理像素？

• 其实物理像素就是我们我们屏幕上一个一个的小点
• 1物理像素 = 屏幕上的一个小点
• 而我们所谓的分辨率，就指的是你的屏幕有多少个小点组成
  • 1920*1080指的就是当前的屏幕，宽度上有1920个小点组成，高度有1080个小点组成，所以物理像素是固定的

物理像素的大小与清晰度

• 理论上来讲物理像素的值越大，他就越清晰

2.2 CSS像素

---

什么是CSS像素？

• 他就是我们写代码的时候写的width:100px的像素(px)

2.3 浏览器对于两像素的抉择

---

浏览器在渲染网页的时候会将CSS像素转化为物理像素之后在进行渲染

• 在默认情况下，pc端： 1css像素 = 1物理像素
• 但是在移动端，1css像素并不等于1物理像素
  • 比如说iPhone6 的分辨率为750*1334，当pc端的网页进入移动端他会通过像素比进行缩放，然后进行展示
  • 移动端默认的视口宽度为980px，那么像素比的计算就是980/设备的物理像素宽度，求出来的就是移动端1物理像素，要渲染多少css像素
  • 我们计算出来1.306667，也就是说 iPhone6中1物理像素要渲染1.3个css像素(980px中的)，所以直觉上我们感觉元素变小了

这也就解决了我们开始提出的问题

3. viewport

---

但是这个时候，我们又有需求了，我们想在pc端看到的多大，在移动端看到的就多大，不想看到在移动端的缩放的效果，详情点击

解决方法

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

• meta标签主要用于存放一些页面的元信息，而<meta name="viewport" >就是专门用来设置视口的大小,抛弃使用默认值980
• 比如说<meta name="viewport" content="width=200px" />,加在网页的头部，然后观察html标签的大小
  
  我们会发现html的宽度已经被设置成了200px

所以说如果我们想要和pc端看到的一样大，就需要知道他缩放的原理(像素比：1物理像素渲染成多少css像素)，实际上当厂商在不同的手机中已经为我们设置好了像素比

• 我们只要按照他的设备像素比（dpr），来进行缩放就能达到和pc端看到的大小和移动端看到的大小相同
• 通过查询iPhone6 dpr = 2，也就是说x / 750 = 1/2 ，x = 375,也就是说在iPhone6的条件下将width=375px就会使我们看到的盒子大小移动端，pc端相同
• 但是不同的设备厂商设置的像素比是不同的，而我们可以使width=device-width就可以了
• 而此时，pc端看到的大小和移动端看到的大小相同，此时的视口就叫做完美视口，device-width就可以称作完美视口的宽度
• 一般情况下，现在厂商设置的设备像素比大多都是 2 或者 3.