像素与viewport浅谈_viewport 真实宽度-优快云博客

本文链接：https://blog.youkuaiyun.com/liu14lang/article/details/105831435

本文探讨了像素的物理和逻辑概念，以及在CSS中的应用。重点介绍了viewport的重要性，包括其在移动端响应式开发中的作用，如何通过meta标签设置viewport宽度、初始缩放等属性，以实现更好的页面适配。同时，提到了理想视口的概念，以确保网页在不同设备上的显示效果。

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

像素：

对于像素有两个概念，一个是物理像素，一个是逻辑像素。

物理像素是由屏幕自身决定的，一旦屏幕生产出来后其物理像素就固定了，我们知道屏幕之所以能够显示图像，是因为屏幕上排布着密密麻麻的小光点，通过这些光点呈现各种的色彩而显示出不同的图像，其中一个物理像素的大小就等于屏幕上光点分布的间距。

逻辑像素是抽象的，是存在于设计稿中的，也就是 CSS 中的 1px 的概念。它与设备像素是独立的，两者并不会相互影响。

但是我们编码用的是逻辑像素，而呈现在屏幕上需要涉及物理像素，所以我们需要知道每个设备中逻辑像素与设备像素之间的转换关系，所以就引出了 DPR 的概念，DPR 也是自设备屏幕出厂就已经确定了的。每个设备都有各自的 DPR。DPR 可以表示设备像素与逻辑像素的关系，其公式定义为：DPR = 逻辑像素宽度/物理像素宽度. 比如拥有 Retina 屏幕的 iPhone6，它的 DPR = 2, 所以在 iPhone6 中，1个CSS像素宽度等于2个设备像素宽度。

viewport

viewport 概念最早是由苹果公司提出来的，以便于移动端的响应式开发。在移动端开发中主要有两个宽度的概念：viewport 宽度和设备宽度。

viewport宽度，主要应用于移动端，在 iPhone 手机中，viewport 的宽度一般为980px，在安卓手机中 viewport 的宽度一般为800px；网页中的宽度是以 viewport 的宽度为基准的。

设备宽度，在设备出厂时就确定了。

理想视口：在移动端开发中，我想让网页尽可能的呈现在设备屏幕中，而又不想页面宽度过大，致使水平滚动条，所以理想的视口一般就是 viewport 宽度等于设备宽度的 viewport 。

一般的操作就是在 <head> 中加入 <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

解释：

width：指的是 viewport 的宽度
initial-scale：初始缩放因子，viewport宽度 = 设备宽度/缩放因子
maximum-scale：缩放因子上界
minimum-scale ：缩放因子下界
user-scalable：是否可以缩放页面。

tips： width 和 initial-scale 都可以设置 viewport 宽度，写其中一个也是可以的，一起写是考虑到浏览器兼容性问题，因为有些浏览器不支持 width 或 initial-scale 。但是如果一起写的话，需要注意的是，当两者计算出来的 viewport 宽度不相等时，取最大的值作为 viewport 的宽度。