常见电脑分辨率

        作为一个前端开发工程师，了解常见的电脑分辨率是尤为基础且重要的。目前工作是笔记本外接显示器，这是目前笔记本的默认显示器设置：

外接显示器的设置：

 大家也可以观察一下自己的电脑设置~

 一、物理分辨率

        物理分辨率指显示屏可显示的最高像素数，由屏幕实际存在的像素的行数和列数相乘而得，是固有的参数，出厂设定，不能修改，例如，电脑的物理分辨率如果为1920x1080，那么最高可以设置显示的分辨率为1920x1080，但不能超过1920x1080。

二、常见显示器分辨率

以我的电脑为例

• 最大情况下：1920 * 1080
• 125%缩放：1536 * 864（最大宽高分别除以1.25）
• 150%缩放：1280 * 720（最大宽高分别除以1.5）
• 外接显示器：2560 * 1440

 同事用的mac本，她的屏幕分辨率则为：1440 * 900

三、浏览器可视范围

        上述给的尺寸一般是最大尺寸，不过我们肯定都知道，浏览器顶部有窗口、地址栏、书签栏，而电脑底部还有任务栏，这部分需不需要考虑呢？答案当然是需要的，虽然做响应式一般是对宽度进行判断，但高度在一些情况下也是有必要考虑在内的。

可视高度 = 总高度 - 浏览器顶部高度 - 系统底部任务栏高度

        利用开发者工具进行观察，浏览器顶部菜单栏大概是117px，而windows底部任务栏大概为40px，总共157px。减去这部分高度则上述数据变成了：

• 最大情况下：1920 * 923
• 125%缩放：1536 * 707
• 150%缩放：1280 * 563
• 外接显示器：2560 * 1283

        可以看出，高度并不是个有迹可循的数字，在不同的浏览器和系统也会有细微区别，所以在网上查询的时候，有些只给出来最大值，而有些则不统一。

        而在实际开发中，我们开始主要根据宽度进行响应式判断。而对于高度只需考虑一个相对保守的值。并且用户打开浏览器也不一定按照100%全屏使用。多resize窗口，使得各个情况下网页都能正常且美观显示才是王道！

 参考文献：

网站设计时需要考虑各浏览器菜单栏所占的高度吗？ - 知乎