设备像素，设备独立像素，CSS像素 & meta viewport

最新推荐文章于 2023-04-26 11:23:17 发布

转载最新推荐文章于 2023-04-26 11:23:17 发布 · 968 阅读

移动开发专栏收录该内容

1 篇文章

订阅专栏

本文详细解析了设备像素、设备独立像素与CSS像素的区别及联系，并深入探讨了Viewport的含义及其在移动页面开发中的应用。

前言

这两个属性说难不难，说容易又不易容。但如果你弄明白了这个，你就明白了一些东西，一些你常常用但却不知道为什么的代码。下面我们还是先从它们各自的定义开始说起，其实虽然标题里是三个名词，但我们接下来只聊两个就可以了，为什么？看完你就知道了。

基本定义

设备像素：设备像素又称物理像素（physical pixel），设备能控制显示的最小单位，我们可以把这些像素看作成显示器上一个个的点。

CSS像素：CSS像素是Web编程的概念，独立于设备的用于逻辑上衡量像素的单位，也就是说我们在做网页时用到的CSS像素单位，是抽象的，而不是实际存在的。

设备独立像素：(也叫密度无关像素)，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用并控制的虚拟像素(比如：CSS 像素,只是在android机中CSS 像素就不叫”CSS 像素”了而是叫”设备独立像素”)，然后由相关系统转换为物理像素。
所以说，物理像素和设备独立像素之间存在着一定的对应关系，我们会在接下来的篇幅中说到它们。

通过上面的定义我们就可以从中挑出两个来展开就可以了，也就是设备像素和设备独立像素（在本文我们不妨假装Android的“设备独立像素”是通用叫法），正如你所看到的，因为设备独立像素已经包括了CSS 像素。

在PC端可以通过screen.width/height属性来获取设备独立像素值，在PC端这个值把它当成我们常说的屏幕分辨率（实际上它不是，但是由于在PC端设备像素和设备独立像素数值相等，才有这么一个不准确的说法）。但你把浏览器切换到设备模式时，也就是在移动端环境下通过上面的screen.width/height获取的不是移动设备的分辨率，而是移动设备的屏宽/高（这里只是猜测），如：Iphone 5s下screen.width =320、screen.height = 568。本以为是浏览器里的设备环境没有完全模拟真实的移动设备环境，可是用真机测试时，还是出现同样的结果screen.width =320、screen.height = 568。值得注意的是：不管你手机是否切换到横屏，这两个值还是一样的。所以不管是移动端还是PC端通过screen.width/height获取的这个值是设备独立像素（CSS 像素），而不是设备的屏幕分辨率，因为设备的屏幕分辨率对于WEB开发者来说是无法通过代码来获得的，是完全透明的。

两者之间的关系

在一定的条件下两者它们两者是可以相等的，比如：在PC端浏览器默认情况下（100%，即页面没被缩放），一个物理像素 = 一个设备独立像素。而在移动端可就不一样的，这两个值很多时候是不相等的。为什么会不相等，因为为了让你看起来更爽，爽在哪里？就是画质的精细度。即使它们有关系，但又不相等，那么总得有个说法或者公式吧？别急，在这之前，我们还得认识个东西叫PPI。

PPI又是个什么东西？总之它是个好东西，不然为什么各品牌的手机商开发布会时常常挂在嘴边。PPI 全称是（pixel per inch）翻译下就是每英寸内有多少个像素点，这个像素点指的是设备像素点（物理像素），说得接地气点PPI就是像素密度（pixel density）。PPI的值越高，画质越好，也就是越细腻，看起来更有逼格。那么PPI是怎么算出来的呢？我来看看它的公式。

我们不妨用上面的这个公式做做数学题

结果应该跟红框中的一样吧？实际上会有零点几的出入，但这没关系。例如你用Iphone 6 来算时得出的结果：325.6122832234167 。

好了我们还是回到上面的问题：两者（设备像素和设备独立像素）是如何进行换算的？它们是通过设备像素比(dpr,device pixel ratio)来进行换算的。那么什么是设备像素比呢？

设备像素比

定义

设备像素比 = 设备像素/设备独立像素 // 在某一方向上，x方向或者y方向

那么现在问题来了，什么是设备独立像素呢？上面不是说过了吗？但我觉得再重复一篇也不为过。
设备独立像素（DIP，device-independent pixel，density-independent pixel），简单地来说设备独立像素就是：独立于设备的用于逻辑上衡量像素的单位。

逻辑上衡量像素的单位？这不就是说CSS 像素吗？没错就是它。好下面我们就来接着讲。

我想现在“设备独立像素”和“CSS像素”的关系已经狠狠地印在你的脑子里了吧！

如何获取

你可以通过JavaScript 中的window.devicePixelRatio来获取设备中的像素比值。

为了让大家更容易区分和理解，我们不妨把设备像素叫做设备光点。那么这个设备像素比有什么用呢？

它可以告诉你一个设备光点对应多少个像素点。还有一个东西我们明白了对于理解这个设备像素比会有帮助。设备光点的大小是固定的，是不可变的，而设备独立像素是可以被拉长或者被压缩的。这个要怎么理解呢，我们不妨来看看三个图，看完后相信你会明明白白的。

标准PPI（160）下的设备像素比
经放大后的设备像素比图示
经缩小后的设备像素比示图

注：深色为设备光点，浅色为设备独立像素

看完这三个图后我们可以得到如下结论：

一个设备光点可以对应一个CSS 像素（PPI = 160时）；
一个设备光点可以对应多个CSS 像素（缩小）；
一个CSS像素可以对应多个设备光点（放大）；

下面我们来看个现实中的例子，Iphone 5s 使用的是 Retina 视网膜屏幕，什么是Retina视网膜屏幕？PPI 值超过 300 的叫做超高密度屏幕，只是 Apple 给它换了个高大尚的名称：Retina 视网膜屏幕而已。

在做移动页面开发的时候，相信你经常会遇到这种情况：在不同的手机上看时，里面的图片、文字或者线的大小会不一样，有时候大小区别还非常地大。原因就是刚才说到的设备像素比在作怪。

你想啊，如果在普通屏即标准 PPI下一个设备光点对应一个 CSS 像素时，页面不大不小，完美地渲染出来了。但在现在这个高逼格的年代，标准 PPI 已经很少见了。更多的是 Retina视网膜设备。而设备像素比不同的品牌的手机这个值也是不一样的。即使是同一个品牌的手机也不一样。你比如 Iphone 5s 设备像素比为2，Iphone 6s 设备像素比为3。至于安卓机中的设备像素比就更多了，有1.3、1.5、2、3等等。

meta viewport 你真的了解吗？

前言

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

上面是一行我几乎每天都用到的代码，它给我们带来的好处是非常明显的，一眼就可以看到的，除了这一点，我对它就一无所知了，我天真地以为只要认识它能给我实现什么样的效果就足够了，可事实却告诉我：“你这小子也太天真了，你千万别被网上一大堆的搜索结果骗了，虽然几乎所有的搜索结果长得都像孪生兄弟甚至一模一样，我相信他们也并没有说谎，但也请你相信我，他们只是在骗自己”。在文章的开头我们不妨看看网上一堆关于 meta 中name=”viewport” 的介绍，但我不想重新他们的话，可是不写又不行，那么好吧，我向你们低头了，但我这人有个小毛病，就是当我有的东西你也有的时候，我会把它做得比你更出色。好吧，我承认我刚才在吹牛逼，我们马上进入正题。

基本定义

如果你有在网上搜索过 name=”viewport” 的话，相信你对这个基本的定义已经有大概的了解，但好事不嫌多，少看一次不如再看一次。

Viewport 有道词典的解决是视口，观察孔的意思，那么在这里我们要怎么解释呢？这是一个问题，但这个对于我们理解什么是Viewport 也没有多大作用，但作为中国人把它翻译成中文还是有必要的，我们不妨把 Viewport 叫作视窗。为什么是它，其实也没什么就是喜欢。

很多书籍把它翻译成视口，但有没有书把它翻译成视窗，这个就不知道了，毕竟是我自创的。所以以后不管你看到视口，还是视窗，它指的就是一个东西 Viewport 。

这个meta 标签是由苹果发明的，后明就慢慢地被其他的生产产商所接受了。于是就不知不觉地流行了起来。

Viewport 有几个属性你需要了解的

width：控制 viewport 的大小，你可以给它指定一个值，如：600，或者甚至还可以给它一个特殊的值，如：device-width，device-width为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：与 width 相对应，指定viewport 高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：是否允许用户手动缩放。

看完上面的几个属性是不是觉得对 viewport 理解了，甚至觉得在viewport 的世界里如鱼得水。如果我对你说这只是 viewport 之旅的开始，你会不会觉得生活不再美好了？且慢，我们不妨一步一步来？
上面所说的其实只是 viewport 的基本概念，一点点皮毛而已，如果要对其作深入的了解，我们还得专门拿出点时间来跟他耗耗。

三个视窗

Viewport 虽然它只是一个单词，但它却囊括了三个方面。是哪三个方面呢？Viewport 分为：视觉视窗、理想视窗、布局视窗。怎么样这会儿傻眼了吧？宝宝不用怕，我们一个一个来。

视觉视窗

所谓的视觉视窗说白了就是设备的屏幕区域，换句话说就是用户通过屏幕所看到的页面内容。但它所对应的并不是指屏幕区域里的物理像素，而是CSS 像素。并且它所包含的 CSS 像素的数量也是随着用户缩放而有所改变。如果你想了解更多 CSS像素和设备像素（物理像素）的关系，你可以前往《设备像素，设备独立像素，CSS像素》进行深入了解。

meta-viewport-usage

理想视窗我们可以通过window.innerWidth | window.innerHeight来获得理想视窗对应的宽和高。

布局视窗

布局视窗跟视觉视窗不一样，它不是指设备屏幕区域，它是为了解决PC 端网站在移动端显示不佳的一个解决方案。布局视窗通常比设备屏幕宽得多，一般为980px，但也不是唯一，在不同的浏览器中也会有所不同如：在Safari iPhone中布局视窗的宽为980px，在Opera中布局视窗宽为850px ，在Android WebKit 中而已视窗宽为800px，而在万恶的IE中布局视窗宽为974px。说了一堆，这个而已视频到底是个什么玩意呢？我们来看一个图我想你就应该明白了。

meta-viewport-usage
我们可以通过document.documentElement.clientWidth | document.documentElement.clientWidth来获得布局视窗的宽和高。
注意：布局视窗的宽高值是在页面没添加viewport 时所获得的值。如果你给页面添加了viewport 并且设置了width = device-width 时，通过上面的代码所获得的值就不是布局视窗的默认值了。

理想视窗

这个理想视窗是为了布局视窗而生的，为什么这么说，因为它是基于布局视窗的。他其实就是变了尺寸的布局视窗。理想视窗就是把布局视窗调整到合适的状态，让页面有最好的表面效果，这也是它名字的由来。设置了理想视窗用户就不再需要对页面进行缩放，因为浏览器已经帮你把页面调整到最佳的显示状态了。而你要做的就是告诉浏览器，你要他这么做就OK了。就下面这一段代码就可以让浏览器乖乖地把布局视窗调整到最理想的状态

当然了，如果你的网站是PC端的或者没有作响应式处理的。虽然布局视窗已经调整到最佳显示状态，但你所看到的网页还不是你想要的，因为整个PC页面都压缩到理想视窗大小了，内容基本都看不清。所在理想视窗是会对于移动页面的，这个要在移动设备上才能看到效果，如果在PC上通过浏览器的设备模式查看的话页面是不会挤在一起的，你能看到的是页面的一个部分，你可以通过滚动来查看页面中的不同区域。

闲言碎语

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

对于这行代码我们是不是每次都得把这五个属性都写上呢？答案肯定是否定的，例如：如果你添加了user-scalable=no 那么，minimum-scale=1, maximum-scale=1这两个属性就没必要追加了。因为你都已经禁止了用户缩放页面了，允许的缩放范围也就不存在了。但我们可以像下面这样使用属性的搭配来巧妙地实现禁止用户缩放页面的功能。