html - 如何在电脑上测试html5手机网页

Question

我正在使用html5，css3和javascript开发一个html5移动网页。但是如何在pc中测试布局。我尝试添加一些插件来调整浏览器的大小以适应手机的分辨率，但成功了。

score 3 · Accepted Answer

Opera 有一个移动设备模拟器，可以模拟许多设备，您可以创建自己的设备。

Chrome 有一项功能，可让您设置用户代理和设备指标以在移动设备上进行测试。您可以通过按 f12 打开开发人员工具并单击右下角的小齿轮来访问它。

score 1 · Accepted Answer

您可以使用 Chrome 的检查器设置视口的硬宽度/高度以测试移动布局。为此，请按打开检查器ctl-shift-i。然后点击右下角的小齿轮设置齿轮。这将打开此页面：

设置页面

单击Overrides左侧边栏中的。

然后使用此部分设置您的视口设置：

视口设置

score 0 · Accepted Answer

这应该模拟移动浏览器到您的应用程序。

score 0 · Accepted Answer

“Web 开发人员工具栏”扩展（适用于 Chrome 和 Firefox）在“调整大小”选项卡中具有一个名为“查看响应式布局”的功能。您还可以设置自己的首选尺寸设置并将浏览器调整为您想要的任何尺寸。

另一种选择是使用您家中的设备或您的朋友可以借给您的设备，并使用 xip.io 服务直接从这些设备访问您计算机上的文件。

4 回答 4