现在很多人是通过智能手机或平板电脑浏览网页,在网页设计上就要考量到如何让不同尺寸屏幕大小也能正常显示,以往会制作成电脑版和手机版两种格式,后来多半以响应式网页设计(Responsive web design)技术直接在不同尺寸屏幕上显示最适合的样式,更重要的是可以节省维护的成本和时间。想测试自适应设计在各种设备显示情形,除了直接使用手机浏览外,其实也有不少工具可以辅助。

本文要介绍的「everysize」可以检查你的响应式网页在各种尺寸设备下的显示效果,操作方式也很简单,只要输入要测试的网址就能使用,无需额外下载或安装软件,也不需要手动调整浏览器视窗大小。

everysize 内设一些常见的手机、平板电脑显示器尺寸,例如 iPhone、iPad、Samsung Galaxy、OnePlus、Google Pixel 或是 Bootstrap 各种框架大小,也可以依照需求新增或删除设备,将测试画面拖拽到适当位置。和一些只提供截图的服务不同,everysize 是以嵌入(iframe)方式让网页在特定大小范围呈现,兼具可直接操作使用的特性。

everysize

网站链接:https://everysize.kibalabs.com/

使用教学

开启 everysize 输入要测试的网站网址,点选 Go 开始使用。

在线免费用!这个网站帮你测试响应式网页效果

预设情况下 everysize 会在几种不同的尺寸显示网页,包括大、中、小和一个最小的尺寸范围,如果要测试的页面本身已经具有自适应网页设计,就能在不同的屏幕大小显示出不同的效果,例如最常见的就是选单缩紧、侧边栏移动到最下方等等。

在线免费用!这个网站帮你测试响应式网页效果

从每个预览画面左上角可选择要带入的设备尺寸,像是比较新的 iPhone 11 Pro 或是 iPad Pro 都能够找到,也有 Samsung Galaxy、One Plus 和 Google Pixel 4 等大小。

在线免费用!这个网站帮你测试响应式网页效果

如果你想测试的设备不在 everysize 列表中,也可以从左上角自定义长宽尺寸进行测试。

在线免费用!这个网站帮你测试响应式网页效果

everysize 很方便的是可依照需求将设备拖拽到适当位置,在测试时就能即时看出不同设备间可能产生的变化。

在线免费用!这个网站帮你测试响应式网页效果

前面有提到这个工具不单单只是一个截图生成器,而是确实在特定范围显示网页,因此可以通过键盘鼠标直接浏览页面,或是实际操作看看是不是可能产生问题,左上角有个选项能调整缩放比例,如果屏幕较小或是无法一次塞入这么多设备也能稍作调整。

在线免费用!这个网站帮你测试响应式网页效果

值得一试的三个理由:

  • 测试自适应网页设计在不同设备的显示效果
  • 内设多种常见的设备类型,亦可依照需求自定义特定尺寸大小
  • 以嵌入方式将网页直接带入特定范围,可通过鼠标实际操作测试

更多测试工具:

收藏 129
点赞 15

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。