Geek Answers Handbook

A true mobile screen emulator?

I have this page:

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

Uses a viewport for different screen sizes of a mobile phone.

When I run this on my iphone, I see the font changes:

enter image description here

But when I use Ripple or other chrome extensions (which I found), it does not show me the increased font size. only the screen size changes. (but this does not affect the font size)

How can I emulate (chrome extension) the size of the screen so that it shows me as if I were on a mobile phone?

+1
source share
1 answer

You do not need the Chrome extension for this, the developer tools already have such a built-in function.

  • Open the developer tools ( F12 , Ctrl Shift I , ...).
  • Click on the gear in the lower right corner.
  • Click Overrides.
  • Turn on "Device Metrics" and set "Screen Resolution" / "Font Scale" to the values ​​you need.

Examples (360x200 and 200x360, I did not increase or change the size of the screenshots):

360x200

200x360

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

+3
source

More articles:


All Articles