更正缩放百分比范围以测试不同设备上不同浏览器的响应能力

Correct zoom in-out percentage range to test responsiveness on different browsers on different devices

我正在使用 Google Chrome 并测试我正在使用的网络应用程序的响应能力。到今天为止,我有:

  1. Google Chrome - 版本 88.0.4324.96(正式版)(64 位)
  2. Mozilla Firefox - 版本 84.0.2(64 位)

Chrome 提供 25-500% 的缩放百分比,而 Mozilla 提供 30-300%。

我注意到这些百分比范围已有一段时间了。

问题: 测试 css/html 对大多数设备(从宽屏到手持设备)的响应能力的最小和最大百分比的正确范围是多少 - 比如弯曲的超宽屏桌面显示器和超高分辨率笔记本电脑到所有方式缩小到 iphone8 屏幕或类似屏幕的手机?

我问现在 UI/UX 世界上每个业务和项目管理团队都关心应用程序页面在设备的所有屏幕尺寸上的响应能力。而且我们可能没有手边的所有设备来获得应用程序在不同屏幕尺寸上的表现的“虚假”信心。我们的开发机器都是基于 windows 的,根本没有 Safari。所以现在的问题是,有没有什么方法可以让我们依靠特定浏览器的缩放百分比范围来了解预期的行为?

我建议使用 Chrome 开发人员工具 中的 设备工具栏。您可以调整 viewport 大小来模拟不同的设备。

当您需要模拟比当前屏幕更大(和更小)的设备时,这很有效。

我目前的笔记本电脑显示分辨率是 1920x1080。如果我想准确测试 更大 的设备,比方说 2048x1536,我可以将视口宽度和高度调整为 2048x1536 [=35] =] 的开发者工具:

现在看一下来自 BrowserStack 的屏幕截图,它显示了真实的 2048x1536 屏幕尺寸,请注意它完全匹配: