html - 真正的手机屏幕模拟器？

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 扩展程序。