如何测试 html 文件的移动响应能力

How to test html file for mobile responsiveness

我需要测试 html 文件的移动响应能力,但我找到的所有资源都需要 URL 或本地主机,有什么方法可以测试响应能力吗?一个 html 文件?

是的,只需用 Chrome or Firefox 打开 .html 文件。这些浏览器有 device mode.

您可以更改屏幕大小并查看它在手机或平板电脑大小的屏幕上的显示效果。

你有很多选项来测试它,但每个选项都有它的好处。

  1. 您可以将浏览器最小化!
  2. 您可以使用来自 chrome、mozilla 等的设备模式
  3. 您可以找到很多在线响应式站点测试器来满足您想要的任何分辨率

在我看来,测试响应能力的最佳方法是 Chrome。右键单击页面并检查。然后会有一个按钮来打开响应测试。您可以选择设备以查看您的页面在各种设备上的呈现方式。这比调整您的 window 大小要好,因为页面在不同平板电脑和手机上的呈现方式略有不同。

如果您保存文件 .html 您可以使用 firefox 或 chrome 打开,但我建议您使用 firefox 开发版 https://www.mozilla.org/it/firefox/developer/

如果你使用Firefox你可以在菜单->开发->灵活显示(ctrl+shift+m​​)

Chrome(ctrl+mauisc+i + emulation)

在此页面中您可以select查看设备。

Google 提供了一个在线工具来检查您的网页是否 mobile-friendly!您可以提供 URL 或 copy/paste 您的 HTML.

Google Mobile-Friendly Test

没有什么比使用 真正的 phone 更好的了。例如,不同 phone 之间的 px 大小不同,可能会导致麻烦。当显示占据 100% 时,URL 栏的高度在垂直弹性滚动中发挥作用。

要进行此类测试,您可以使用隧道 - https://serveo.net/ 或 ngrok 等产品。

我用http://www.responsinator.com 非常简单和完整,有多种类型的移动设备和 table 设备。