上一小节我们带领大家认识了一下媒体的一些小知识，知道了媒体都有哪些设备。

那么问题来了，手机、平板、笔记本和台式机它们几个通通被归为了一类设备：屏幕设备(screen)，在区分别打印设备还是屏幕设备的时候非常好区分，但如果区分移动端还是PC端的时候要怎么做呢？

虽然无论手机、平板、笔记本还是台式机都会被归为屏幕设备(screen)，但即使是同一种设备也会拥有自己的一套，比如宽啊、高啊什么的，我们就可以利用这些来判断到底是哪一种屏幕设备：

为了方便大家的学习，我只挑了这四个最常用的，其实完整版还有很多很多…

但掌握这四个就以及足以应对日常开发的需求了，而且这四个看似不太好理解，实际上咱们一讲大家就能明白：

而且后面那俩最大、最小高度什么的很少会用到，实际上我们就是靠宽度来检测使用的是哪种屏幕设备的。

也就是说你只需要记住这俩就行了：

那么什么是最大、最小宽度呢？我们可以拿手机和电脑来举例，假如你手中目前正在用一台 iPhone X 来观看这个网页，那么 iPhone X 的分辨率是 375 x 812 。

有些同学看到这里可能会说：老师你是不是没用过 iPhone ？iPhone 怎么可能就这点分辨率呢？好歹也是大名鼎鼎的视网膜屏幕，人家官网上明明写的就是 iPhone X 为 2436 x 1125 像素分辨率，当然这一看就是高x宽，咱们给它倒过来变成宽x高：1125 x 2436 ，可远远比你说的那个什么 375 x 812 高多了！

同学们如果有这样的疑虑的话，请按下你上的 f12 键打开控制台(苹果电脑是?+?+ i)：

那这就奇怪了，这上面所有手机分辨率都很低，可以肯定的是现在的手机根本没有这么低的分辨率，那这到底是怎么一回事呢？答案要从很久很久以前说起：

在移动互联网刚刚兴起的时候，比较主流的智能手机是诺基亚塞班系统的类似于这种的3.2英寸的手机：

这种手机是当时最实惠好用的智能手机，超大屏幕(3.2寸)，当然多少也是有点毛病的，比如多点触控，必须使劲用指甲按屏幕才能有反应(电阻屏)，偶尔还会死机等…

直到后来 iPhone 4 的出现，大家相信或多或少也听过 iPhone 4 当年到底有多火，火到当初不少新闻都在报道什么孩子攀比非要逼着父母给自己买 iPhone。

甚至有一小部分买了 iPhone 手机的在街上都不把手机放进口袋里，而是拿在手里时不时的就拿起来一下自己的"尊贵身份"。

最夸张的一则新闻是有个年轻人为了得到 iPhone 不惜卖掉自己的肾(这是真事)：

当时我还记得我买了一款号称全世界屏幕最大、最薄的手机：索爱LT15i

导致这个问题的最主要原因就是每英寸的分辨率(DPI)，来对比一下当年的这三款手机:

乔布斯：人眼能分辨出的最大分辨率是300dpi，超过这个分辨率，人的眼睛就难以看出颗粒感

所以这就是视网膜屏幕的由来，可以看到在当时没有哪个手机的DPI能比得过 iPhone 4 ，当然咱们说这些并不是为了一顿狂吹 iPhone 4 的屏幕有多好，而是为了引出历史遗留问题：逻辑像素。

当时移动互联网已经悄然兴起，伴随着塞班的陨落，安卓和IOS正在强势崛起，所以很多网站需要适配手机的分辨率，但 iPhone 遥遥领先于众多竞争对手的分辨率就会带来这样问题：

假如我在里写了300像素(px)的按钮，在还没被淘汰的诺基亚手机上差不多占了83%的屏幕宽度，在超大屏幕的安卓手机上差不多要占据62%的屏幕宽度，而在视网膜屏幕的 iPhone 手机上居然只占了还不到一半的屏幕宽度！

于是乎，逻辑像素这个概念出现了！

iPhone 4 的物理像素为 960 x 640，不知为何手机厂商宣传的时候总喜欢用高 x 宽，可能是因为高的数字大一些，放在前面好看？咱们给改成宽 x 高：640 x 960，那么它的逻辑像素就是 320 x 480，逻辑像素是什么呢？就是你写CSS的时候写的那个px。

在电脑端通常1px对应的就是屏幕的物理像素点，但手机之差异过大，为了抹平这个差异，高分辨率手机1px对应的就是两个物理像素点，低像素手机1px还是对应1个物理像素点，这样就不会出现同样 300px 的按钮，占了屏幕90%，另只占了一半的情况了。

现在的手机分辨率更加的夸张，所以 iPhone X 的1px对应的是三个物理像素点：

虽然当年 iPhone 和安卓的分辨率差距很大，但经过多年的发展，如今的安卓屏幕也不至于比 iPhone 差那么多了，那么这种逻辑像素还有它存在的意义吗？

其实还是有意义的，随着科技的发展手机屏幕的分辨率一飞冲天，但是电脑的分辨率貌似没有什么太大的变化。
比如在我刚上大学时，大一点的笔记本电脑是 1920 x 1080 的分辨率，小一点的是 1366 x 768。
结果我现在都毕业好几年了，虽然也出现了一些高分辨率的2K电脑，但主流情况依然是大一点的笔记本 1920 x 1080，小一点的 1366 x 768。

如果取消了逻辑像素，1px 对应的就是屏幕上的物理像素点的话，那么iPhone X 横过来就变成了 2436 x 1125 分辨率，比电脑的 1920 x 1080 分辨率还高，我们就没有办法根据像素来判断到底现在用的是手机设备还是电脑设备了，但是现在 iPhone X 的逻辑分辨率只有 375 x 812，这样就很好判断了。

本章中我们详细讲述了为何在程序中的 iPhone 分辨率和现实中的 iPhone 分辨率有很大的差别，同时引出了逻辑像素的这么概念。

并且我们还罗列了一些媒体的常用，那么下一小节我们就来详细的讲解一下如何用媒体和逻辑操作符进行结合来判断当前到底在使用何种设备。