乔布斯提出的视网膜屏幕是什么概念呢？

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金

此文连接上文《为什么移动端不能像pc网站一样写》连续观看体验更佳

视网膜屏幕

首先，我们的手机屏幕尺寸是非常多的，但是即使尺寸很多，我们会发现一个很神奇的事情，就是显示上面好像都差不多。

例如上面的，我们会看到虽然手机尺寸变化比较明显，但是页面显示上，看起来居然一样？？分辨率不一样难道不应该是：看着大大小小，每种分辨率的显示都不一样的么？

科普：

这就要感谢乔布斯了。

在iphone4的发布会上，乔布斯首次提出了视网膜屏幕的概念，这个的概念可谓是，惊为天人，我们来看下，到底什么是视网膜屏幕

一张图带你了解：视网膜屏幕

分辨率低手机1的大小 = 高分辨率手机2 * 2的大小

这样屏幕更精致，看上去也不会有大小的变化，像下面这样做

左边的用300物理像素，右边的用600物理像素，但是...我们也不可能每个手机来一个像素吧？？？

那要多少设计图？写多少样式？？

所以我们必须用同一种单位来告诉不同分辨率的设备，在界面上显示的像素大小应该是多少，这个单位就是设备独立像素

每个设备都有属于自己的独立像素，通过浏览器的模拟器，我们可以看到，每个设备的独立像素。

那设备独立像素，和我们说的物理像素之间到底什么关系呢？

设备像素比

像素比：物理像素和设备独立像素的比值。

这个比值，我们可以利用js进行获取window.devicePixelRatio

当然也有设备例外：

？？？？？？？？？？

说好的像素比 = 物理像素 / 设备独立像素呢？？

（414 * 736 ）* 3 = 1242 * 2208
复制代码

说好的 1080 * 1920呢？？多出来的要怎么办？ 放心，手机会自动把 1242 * 2208 的设备独立像素，塞进 1080 * 1920 的物理像素中 大家也可以看到 iphone6 是贴合我们像素比的要求的，所以一般我们拿到的手机设计图，就是 750*1334 的

安卓的就不要试啦设备，尺寸太多，也不一定严格按照分辨率了。

上面看了这么多关于尺寸的内容，但是我们还是不知道应该怎么做，设备独立尺寸和我们写css有什么关系么？或者，怎么让我们设置的 css 就是根据设备独立尺寸的呢？首先我们要知道，我们原来看到的宽高是怎么来的

375 / 980 * 300 = 114

根据上面的公式，我们发现，我们只要把布局视口设置为和设备独立像素一致，我们的 css像素就等于设备独立像素了

那什么是布局视口呢？

注意！！！一定不能有缩放，要是 100%

视口可以细分为三种：布局视口、视觉视口、理想视口，那分别是什么呢~ 来看看吧

布局视口

布局视口：是网页布局的基准窗口，在这里只考虑布局，也就是不会有非布局的内容，例如滚动条，例如菜单栏。

而在移动端，布局视口有一个默认值980px，这保证了PC网站可以在手机上显示（尽管丑丑的）。

在 js 中可以通过document.documentElement.clientWidth来获取布局视口大小
视觉视口

视觉视口：用户视觉上看到的真实区域，包括滚动条。

在 js 中可以通过window.innerWidth
理想视口

其实就是我们说的设备独立像素，不过当布局视口和视口一致的时候，那结果就是一样的了。

在 js 中利用window.screen.width可以获取到