真正的手机屏幕模拟器？

Question

我有这个页面：

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

针对不同的移动屏幕尺寸使用视口。

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

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

如何模拟（chrome 扩展）屏幕尺寸，以便它显示我好像在真正的移动设备上？

Answer 1

你不需要 Chrome 扩展，开发者工具已经有这样的内置功能。

1. 打开开发者工具（F12、CtrlShiftI、...）。
2. 点击右下角的齿轮。
3. 点击“覆盖”。
4. 启用“设备指标”，并将“屏幕分辨率”/“字体比例因子”调整为您想要的值。

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

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