关于像素，分辨率，viewport，设备像素，css像素，Retina

最新推荐文章于 2023-02-01 16:43:18 发布

remy303

最新推荐文章于 2023-02-01 16:43:18 发布

阅读量2.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：移动前端文章标签：关于像素分辨率 viewport 设备像素 css像素

本文链接：https://blog.youkuaiyun.com/ttongzw/article/details/38659921

移动前端专栏收录该内容

1 篇文章

订阅专栏

本文探讨了像素、分辨率、PPI的概念，以iPhone4s为例，介绍了设备像素、CSS像素以及视觉视口和布局视口的区别。讨论了Retina屏幕的特性，并解释了`<meta name="viewport" content="width=device-width">`的作用，帮助理解移动端响应式开发中的关键概念。

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

做移动的响应式开发也有段时间了，但对于标题所说的一个关键字，并没有每个都完全弄清楚，利用空闲时间好好做个整理（以iphone4s为例说明）。

1. 先说一下像素的概念

像素是度量的单位，可以理解为点。点组成线，线组成面，一个页面也就是有n多个像素点组成。

2. 分辨率

像素的概念和分辨率分不开。我们平时都调整过电脑桌面的分辨率，分辨率越高，我们看到的内容会越清晰，字也会越小；分辨率越小，内容越模糊，字也会越大。

什么是分辨率呢？官方的回答是：分辨率是屏幕图像的精密度，是指显示器所能显示的像素的多少。

iphone4s的分辨率是960像素×640像素，即横向能显示640个像素点，纵向显示960个像素点。

3 .PPI :是每英寸所拥有的像素（Pixel）数目

iphone4s是3.5英寸，这个英寸为斜线的距离

那么PPI的计算就为

4. 第二点测试

有第二点可以知道，横向能显示640px，那如果我的页面上的div设置为320px的宽的话，那手机上应该显示的是该div只占一半的宽度，

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>测试</title>

</html>

测试结果

效果是我们320px的div在页面中显示了1/3的宽度，而iphone4s的宽度640px啊。

这是因为iphone默认的viewport宽度是980px，这里新引出一个概念viewport

5.visual viewport 和layout viewport

以一段话和两张图来说明：

把layout viewport想像成为一张不会变更大小或者形状的大图。现在想像你有一个小一些的框架，你通过它来看这张大图。（译者：可以理解为「管中窥豹」）这个小框架的周围被不透明的材料所环绕，这掩盖了你所有的视线，只留这张大图的一部分给你。你通过这个框架所能看到的大图的部分就是visual viewport。当你保持框架（缩小）来看整个图片的时候，你可以不用管大图，或者你可以靠近一些（放大）只看局部。你也可以改变框架的方向，但是大图（layout viewport）的大小和形状永远不会变。

visual viewport是页面当前显示在屏幕上的部分。用户可以通过滚动来改变他所看到的页面的部分，或者通过缩放来改变visual viewport的大小。因此缩放的时候visual viewport变化，layout viewport不变。无论怎样，CSS布局，尤其是百分比宽度，是以layout viewport做为参照系来计算的，它被认为要比visual viewport宽。

可以看出来两个viewport都是以纵向作为衡量的，所以手机改变方向时指挥对viewport的纵向发生改变，而横向不会改变。如下图是屏幕横向的测试效果。每个浏览器的layout viewport都不一样，iphone4s的layout viewport为980px;(我个人理解为iphone4s的默认html的页面大小为980px铺满屏幕)，android的webkit的layout viewport为800px.

度量layout viewport： document.documentElement.clientWidth， document.body.clientWidth（IE）

度量visual viewport： window.innerWidth，

6. 设备像素和css像素

设备像素即物理像素，就是设备的像素大小。如iphone4s为640px*960px

css像素为我们设计的页面上显示的大小。如font-size：16px;

设备没有进行缩放的时候，1css像素=1设备像素；
当页面放大的时候，1css像素会覆盖好几个设备像素；
同理，缩小的时候，1设备像素又会覆盖好几个css像素。

7. Retina

Retina是苹果提出的一个词，其意义就是屏幕密度（PPI）很高

8 .`devicePixelRatio`

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例

非视网膜屏幕的iphone上，屏幕物理像素320像素，独立像素也是320像素，因此，window.devicePixelRatio等于1.

而对于视网膜屏幕的iphone，如iphone4s, 纵向显示的时候，屏幕物理像素640像素。同样，当用户设置<meta name="viewport" content="width=device-width">的时候，其视区宽度并不是640像素，而是320像素，这是为了有更好的阅读体验 – 更合适的文字大小。这样，在视网膜屏幕的iphone上，屏幕物理像素640像素，独立像素还是320像素，因此，window.devicePixelRatio等于2.