如何在电脑上测试html5手机网页答案

【问题标题】：How to test html5 mobile webpage on pc如何在电脑上测试html5手机网页
【发布时间】：2013-02-10 14:25:07
【问题描述】：

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

【问题讨论】：

【解决方案1】：

例如存在User Agent switcher plugin for firefox

这应该在您的应用中模拟移动浏览器。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

点击左侧边栏中的Overrides。

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

【讨论】：