如果想要测试一个网页能不能在不同的设备上正确显示和阅读,最简单的方法就是直接将视窗调整缩小放大,遇到支持 RWD 技术页面会自动调整为适合的宽度和呈现方式,传统网页则需要左右滑动才能看到超出阅读区域的内容。

本文要介绍「I Love Adaptive」是一个能协助开发者测试网页在不同设备上呈现效果的服务,一般来说,要测试网页在移动设备(手机、平板电脑)能不能正确显示时我们会去找实体设备来实际操作看看,但顶多就是几台手机或平板电脑,无法有非常全面性的测试。

在浏览器上模拟这些设备显示大小,就能知道网页是否照着需要的效果呈现。

这项服务内建一些常见设备屏幕尺寸比例,包括各种型号的 iPhone 和 Android 手机,也有平板电脑例如 iPad 或 Galaxy Tab 等等,除了模拟网页在特定尺寸的显示效果,使用者可通过滑动鼠标进行操作,或是自订尺寸大小、禁止拖拽、切换为直式横向显示等等,也能即时比较不同设备或网页的显示状态,对于开发者来说是非常实用的线上工具。

I Love Adaptive

网站链接:http://iloveadaptive.com/

使用教学

开启 I Love Adaptive 网站后输入要在不同设备测试显示的网址,点击回车就会看到结果。

想做响应式测试?试试这个超好用的在线测试神器!

 

I Love Adaptive 将输入的网址显示在几个常见常用的 iPhone 尺寸中,也会标示型号、解析度等相关资讯,虽然只是在浏览器里将显示范围缩小到特定大小,如果网站使用自适应网页技术就会调整到适合移动设备显示的样式。

从上方可勾选或取消要测试的设备型号,也可一次全选或只选择较热门的设备。

想做响应式测试?试试这个超好用的在线测试神器!

从左侧工具列选择设备类型:手机、平板电脑和台式电脑,亦可选择不同的操作系统。

想做响应式测试?试试这个超好用的在线测试神器!

切换到平板电脑后也会有一些常见型号、屏幕尺寸大小可以挑选,像是 iPad Mini、iPad、iPad Air 和 iPad Pro,左侧「Settings」有些设定选项,包括屏幕方向直式横式切换、是否显示 iOS 控制列(浮动、隐藏或固定显示)、自订高度和禁止卷动。

想做响应式测试?试试这个超好用的在线测试神器!

在手机上可能只会测试直式显示效果,如果想测试平板电脑的横向显示,可以从左侧的设定选项调整显示方向,选取后就会出现横式显示效果。

想做响应式测试?试试这个超好用的在线测试神器!

也可点击上方选项「Custom size」自订要测试的屏幕解析度尺寸大小。

想做响应式测试?试试这个超好用的在线测试神器!

I Love Adaptive 还有一个很有趣的功能,点选最顶端选项的「Compare Urls」开启不同设备或页面比较功能,使用者可以在这里加入不同设备类型,或是让它们分别开启不同页面,就能比较在不同环境下的呈现状态。

想做响应式测试?试试这个超好用的在线测试神器!

值得一试的三个理由:

  • 协助开发者测试网页在移动设备、平板电脑的呈现效果
  • 内建一些常见设备的屏幕尺寸比例,也可自订大小或横向显示
  • 通过比较工具加入不同设备或开启不同网页,比较它们之间产生的差异

点赞 6
收藏 28

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

收藏