手动调整chrome视口大小与使用“Inspect”

Question

我正在尝试为Wordpress创建一个自适应的自定义主题。我在WAMP本地托管它并使用各种工具确保它的移动友好性。问题是，我没有得到一致的结果，在主题上传到实际网站之前我无法在实际的手机上进行测试（有点破坏了在本地托管和编码的目的！）。

使用Chrome“Inspect”功能的结果：

到目前为止一切都那么好，即使视口宽度小于320px。正确？

手动调整Chrome浏览器窗口大小的结果：

开个玩笑，设计突破363px。

哪个会出现在移动设备上？任何建议都表示赞赏。

Answer 1

您可能会看到手动调整Chrome的大小比您在移动设备上看到的更准确，但最好的方法是在移动设备上进行测试。

只要您运行的是本地服务器（localhost或127.0.0.1），就可以非常轻松地将网站部署到服务器上进行测试。方法如下：

1. 确保您的移动设备和运行本地服务器的计算机已连接到同一个wifi网络。

2. 找出您的本地网络IP地址。这是一个方便的链接：http://lifehacker.com/5833108/how-to-find-your-local-and-external-ip-address

3. 在移动设备的浏览器中输入您的本地网络IP地址，然后输入运行本地服务器的端口。

     

   示例：如果您的本地网络IP地址为192.168.1.11，并且您一直在localhost:5000访问该网站，则可以通过192.168.1.11:5000访问移动设备上的网站。