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

Question

我需要测试一个用于移动响应的html文件，但是我发现这样做的所有资源都需要一个URL或一个localhost，有没有办法只用一个html文件测试响应能力？

Answer 1

是的，只需使用Chrome或Firefox打开.html文件即可。这些浏览器有device mode。

您可以更改屏幕尺寸，并在移动设备或平板电脑尺寸的屏幕上查看其外观。

Answer 2

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

如果你使用 Firefox ，你可以放入菜单 - ＆gt;发展 - ＆gt;灵活显示（ctrl + shift + m）

Chrome （ctrl + maiusc + i + emulation）

在此页面中，您可以选择要查看的设备。

Answer 3

您有很多选择来测试它，但每个选项都有它的好处。

1. 您可以最小化浏览器！
2. 您可以使用chrome，mozilla等设备模式
3. 您可以找到许多针对您想要的任何分辨率的在线自适应网站测试人员

Answer 4

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

Answer 5

没有什么比使用真实电话更好的了。例如，各款手机的px大小不同，可能会引起麻烦。当显示占据100％时，URL栏的高度会在垂直伸缩滚动中起作用。

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

Answer 6

我使用http://www.responsinator.com 多种类型的移动设备和台式设备非常容易且完整。

Answer 7

Google提供了一个在线工具来检查您的网页是否适合移动设备！您可以提供URL或复制/粘贴HTML。

Google Mobile-Friendly Test