真正的手机屏幕模拟器？ [英] True mobile screen emulator ?

问题描述

我有这个网页：

API。

I have this page :

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

Which uses viewport for different mobile screen sizes.

When I run this at my iphone I do see the font changes :

But when I use Ripple or other chrome extensions (which I found) , it doesnt show me the increased font size. only screen size is changing. ( but it doesnt affect the font size )

How can I emulate ( chrome extension) the screen size so it will show me as if I'm on real mobile ?

解决方案

You don't need a Chrome extension for that, the developer tools already have such a built-in feature.

1. Open the developer tools (F12, CtrlShiftI, ...).
2. Click on the gear in the bottom-right corner.
3. Click on "Overrides".
4. Enable "Device metrics", and adjust the "Screen resolution" / "Font scale factor" to your desired values.

Examples (360x200 and 200x360, I didn't zoom or resize the screenshots):

Some preset values can be used by switching the user agent (above "Device metrics"). If you want multiple custom values, create a Chrome extension using the chrome.debugger API.

这篇关于真正的手机屏幕模拟器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！