💬 Answered: Real responsive device mode

Question

You might think that changing an iframe's width to a device width acts the same way as a device emulator would, but in reality it does not.

Here is a case in point: if you load pages.github.io in an iframe with a width of 320px, you'll get:

You can try it out yourself:

<!doctype html>
<html>
    <body>
        <iframe src="https://pages.github.com/" width="320" height="568" allowfullscreen></iframe>
    </body>
</html>

If you go to pages.github.io and enable chrome's devtools to emulate a device with the same width (320px), it will look much more responsive:

What's happening here is that the browser actually respects the forced width of the page (980px forced; there are no media queries in this page), and scales the content to fit. I believe it may also do some further text zooming:

Here you can see that while the device width is 320px, the component width is still 980px. Since the whole component is visible, there must be somekind of viewport scaling going on.

For Grapes to really be a "next generation" WYSIWYG editor, full responsiveness mode seems like a must.

Does anyone have any ideas on how we can achieve the same effect as the devtools emulator? Perhaps by using Javascript to dynamically change the viewport scaling? Or by using CSS transforms in a smart way?

Answers (3)

nojacko• April 13, 2018

Build your CSS to with min-width rather than min-device-width etc... and it's all good.

tommedema• April 13, 2018

@nojacko that assumes that I have control over the CSS. That's not the case ;)

Also, the above example does not use min-device-width. It simply uses width: 900px. Small devices are smart enough to scale accordingly. A real responsive mode would therefore do the same.

artf• April 14, 2018

Thanks for the suggestion @tommedema but currently I don't see any value in start working on such improvement, the current implementation works if you want to build a responsive template and this is what really matters. BTW if you really want to work on this PRs are welcome :)

Real responsive device mode

Question

Answers (3)

Related Questions and Answers

Question: trying to have 'Settings' sector under the style

The documented way to parse @keyframes does not work

[Question]: Doctype in the canvas iframe

Cannot set 0px box shadow blur

Paid Plugins That Match This Issue

Browse Plugin Categories