真正的移动屏幕模拟器？

Question

我有这个页面：

http://people.opera.com/andreasb/viewport/ex01.html

其中使用视口用于不同的移动屏幕尺寸。

当我在iphone上运行时，我确实看到了字体的变化：

但是当我使用Ripple或其他chrome扩展（我发现）时，它并没有显示增加的字体大小。只要 屏幕尺寸正在改变。 （但它不会影响字体大小）

如何模拟（chrome扩展程序）屏幕尺寸，这样我就可以看到我在真正的移动设备上？

Answer 1

您不需要Chrome扩展程序，开发人员工具已经具有此类内置功能。<​​/ p>

1. 打开开发人员工具（ F12 ， Ctrl Shift I ，...）。
2. 点击右下角的齿轮。
3. 点击“覆盖”。
4. 启用“设备指标”，并将“屏幕分辨率”/“字体比例因子”调整为所需的值。

示例（360x200和200x360，我没有缩放或调整屏幕截图大小）：





切换用户代理可以使用某些预设值（在“设备指标”上方）。如果您需要多个自定义值，请使用chrome.debugger API创建Chrome扩展程序。