html - True mobile screen emulator ? -

i have page :

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

which uses viewport different mobile screen sizes.

when run @ iphone see font changes :

but when use ripple or other chrome extensions (which found) , doesnt show me increased font size. screen size changing. ( doesnt affect font size )

how can emulate ( chrome extension) screen size show me if i'm on real mobile ?

you don't need chrome extension that, developer tools have such built-in feature.

1. open developer tools (f12, ctrlshifti, ...).
2. click on gear in bottom-right corner.
3. click on "overrides".
4. enable "device metrics", , adjust "screen resolution" / "font scale factor" desired values.

examples (360x200 , 200x360, didn't zoom or resize screenshots):

some preset values can used switching user agent (above "device metrics"). if want multiple custom values, create chrome extension using chrome.debugger api.