小屏幕大视野,如何让笔记本模拟出1920宽度网页效果-UI黑客

作为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...打开设备编辑页面

小屏幕大视野,如何让笔记本模拟出1920宽度网页效果-UI黑客

添加设备屏幕尺寸

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

小屏幕大视野,如何让笔记本模拟出1920宽度网页效果-UI黑客

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

小屏幕大视野,如何让笔记本模拟出1920宽度网页效果-UI黑客

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

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

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

网页实际显示范围

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

小屏幕大视野,如何让笔记本模拟出1920宽度网页效果-UI黑客

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

用新增的1920预览网页

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

小屏幕大视野,如何让笔记本模拟出1920宽度网页效果-UI黑客
小屏幕大视野,如何让笔记本模拟出1920宽度网页效果-UI黑客

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

另一种网页缩放

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

小屏幕大视野,如何让笔记本模拟出1920宽度网页效果-UI黑客

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

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