PC上使用chrome浏览器模拟手机浏览器

Cloud_UNI CHB发布日期：2014-10-30 17:08

更新日期：2014-10-30 17:08

阅读次数：25,576

PC上使用Chrome浏览器模拟手机浏览器

分类：MUI

在开发移动应用(Mobile App)的过程中，可以使用电脑端的Chrome浏览器快速模拟不同手机浏览器的显示效果。要实现这一功能，请参考以下步骤：

1. 在Chrome浏览器中打开要预览的页面。

2. 在页面上右键单击，选择“审查元素”(Inspect Element),打开Chrome控制台。

3. 在控制台中，点击右下角的“Show drawer”按钮，打开开发者工具的侧边栏。

4. 在侧边栏中，选择“Emulation”选项卡。

5. 在“Emulation”选项卡中，从下拉菜单中选择要模拟的手机类型。例如，选择“iPhone 6/7/8”以模拟iPhone设备。您还可以选择其他手机型号进行模拟。

6. 刷新页面，即可看到在所选手机上的模拟显示效果。

7. 若要模拟手机端的触摸事件(如滑动和点击),请勾选“Sensors”选项，并勾选“Emulate touch screen”。

需要注意的是，此方法仅适用于前端开发调试，不能用于真正地测试移动应用的功能和性能。

Cloud_UNI_CHB(作者)

mui封装的窗口管理是基于webview的，而Chrome目前还无法模拟webview。因此，在使用这种方法打开页面进行调试时，调用mui.openWindow()可能会返回undefined。