作为UI设计师，我们在做web页面的时候会接触到各种各样的屏幕尺寸，最常用的有1920-1080、1440-900、1366-768、1280-800等，目前用户电脑中最大的尺寸当属1920了（Mac的5K屏幕可以忽略，用户基数太少）。

问题随之而来：很多设计师使用13寸和15寸的Retina MacBook，默认视觉分辨率（并非物理分辨率）只有1280-800和1440-900，有的公司不给配外接屏幕，那么如何用笔记本预览1920的网页效果呢？

Chrome浏览器的设备模拟功能可以帮助我们，只用一台笔记本就可以模拟任何屏幕尺寸。

看完本文你将解决以下问题

如何在笔记本电脑上模拟大尺寸网页和手机网页

了解Chrome浏览器的设备模拟功能

打开Chrome的设备模拟功能

1-在页面上右键选择检查

2-点击下方弹出层左侧手机图标

3-发现页面变化缩放了，点击顶部的设备切换按钮

4-选择Edit...打开设备编辑页面

添加设备屏幕尺寸

在编辑页面中Chrome内置了很多常用的设备尺寸，平板、手机电脑都有。所以很多时候我们不用手机，在电脑中就可以模拟预览手机网站的页面效果。

接着我们来添加一个1920的屏幕尺寸，步骤见下图：

为了好区分，设备名称直接写1920，后面如果想添加1280，就写1280。

我们现在添加的是Web页面，所以一定要选择Desktop，手机的话选择Mobile。Chrome已经为我们设置好各种手机尺寸了，所以不再添加。

还有一点需要注意，高度我写的是960，并非1080，这是为什么呢？跟网页实际显示范围相关。

网页实际显示范围

拿1920-1080屏幕电脑来说，实际上，网页的首屏展示高度并非是1080，而是要减去电脑系统的菜单栏和Chrome的各种栏目高度，大约是120，1080-120=960。所以我们的模拟尺寸高度也需要减小。如下图：

浏览器不一样可能这个值有所差别。在PC中，系统菜单栏是在下方，道理一样。

用新增的1920预览网页

添加完1920的设备后，就可以在设备切换中选择1920来模拟了。

由于电脑屏幕小，只能显示以30%的缩放来展示，不过这个缩放比例可以调节，大家可以尝试下。

另一种网页缩放

还有一种缩放网页的方法是直接减小网页比例，具体做法是快捷键cmd++/-。

但是缩小到一定程度，网页字体就不会再缩小，整个样式布局也会被破坏，效果很不好，不建议使用。

所以我们以后其实不需要申请外接屏幕，一样可以用笔记本预览大屏幕效果，希望本文能够给各位UI设计师带来设计效率上的提升。

---

更多UI设计干货文章请关注UI黑客

微信公众号 uihacker

UI黑客官网http://www.uihacker.com/

UI黑客论坛http://bbs.uihacker.com/

---