视口、二倍图

小超努力中

于 2023-04-04 19:47:44 发布

阅读量477

点赞数 1

分类专栏：前端文章标签：前端

本文链接：https://blog.youkuaiyun.com/ssigin/article/details/129960434

版权

前端专栏收录该内容

6 篇文章

订阅专栏

视口是当前可见的Web页面区域，包括布局视口、视觉视口和理想视口。布局视口是网页的实际布局宽度，视觉视口是用户看到的部分。理想视口是最佳显示尺寸，通过meta视口标签进行设置。二倍图原理解决移动端图片因像素差异导致的模糊问题，确保在高分辨率设备上清晰显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.视口

什么是视口？

视口代表当前可见的计算机图形区域。在 Web 浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的 UI，菜单栏等——即指你正在浏览的文档的那一部分。

在尺寸较大的设备中，在这些设备上，应用显示区域不一定是全屏的，视口是浏览器窗口的大小。
在大多数移动设备中，浏览器是全屏的，视口是整个屏幕的大小。
在全屏模式下，视口是设备屏幕的范围，窗口是浏览器窗口，浏览器窗口大小小于或等于视口的大小，并且文档是这个网站，文档的大小可比视口长或宽。
概括地说，视口基本上是当前文档的可见部分。

1.1 布局视口

一般移动设备的浏览器都默认有一个布局视口，默认都是980px，大多数情况下也是能显示网页的，只不过需要缩放才能看清楚。

在pc端，布局视口通常和视觉视口都是一样的。

1.2 视觉视口

用户正在看到的网站的区域。注意：是网站的区域。

我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度

1.3 理想视口

为了使网站在移动端有最理想的浏览和阅读宽度而设定

理想视口，对设备来讲，是最理想的视口尺寸

需要手动添写meta视口标签通知浏览器操作

meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

1.4 视口标签

想要移动端布局视口和理想视口一样，需要添加viewport标签

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

属性	解释说明
width	宽度设置的是veiwport宽度，可以设置device-width特殊值
initial-scale	初始缩放比，大于0的数字
maximum-scale	最大缩放比，大于0的数字
minimun-scale	最小缩放比，大于0的数字
user-scalable	用户是否可以缩放，yes或no（1或0）

1.5 标准视口设置

视口宽度和设备保持一致
视口的默认缩放比例1.0
不允许用户自行缩放
最大允许的缩放比例1.0
最小允许的缩放比例1.0

2. 二倍图原理

二倍图的出现是因为移动端会把在PC端正常显示的图片放大，导致照片模糊。模糊的原因是：同样是50*50px（css像素），但是里面的物理像素不相同。

想象一下，一个黄豆是放在50cm * 50cm上看的清楚，还是放在100m * 100m 看的清除呢？

PC端 1px = 1物理像素例： 50 * 50 px = 50 * 50 物理像素

移动端 1px = 2物理像素例：50 * 50 px = 100 * 100 物理像素

举例:

假如一张50 * 50 px（css像素）得图片，放到PC端，需要的物理像素是50 * 50, 但是把这张图片放到移动端设备上，同样的区域，会把这个50 * 50px（css像素）的图片放到物理像素是 100 * 100的区域，这就会把这张图片拉伸，导致图片模糊。于是二倍图就诞生了，用来解决这个问题，我们首先拿到一个100 * 100px得图片，把这张图片压缩成50 * 50px，然后把这张图片放到移动端中，在移动端中会把这张50 * 50px的图片放在一个100 * 100物理像素的区域（这个区域对应的css像素是50px * 50px)，会把这个图片放大两倍，刚好就是这张压缩图片的原图，就会显示的非常清晰。