💬 Answered: Modo dispositivo realmente responsivo

Pregunta

Podrías pensar que cambiar el ancho de un iframe por el ancho de un dispositivo actúa igual que un emulador de dispositivo, pero en realidad no lo hac https://developers.google.com/web/tools/chrome-devtools/device-mode/emulate-mobile-viewports e.

Aquí tienes un ejemplo: si cargas pages.github.io en un iframe con un ancho de 320px, obtienes:

Puedes probarlo tú mismo:

<!doctype html>
<html>
    <body>
        <iframe src="https://pages.github.com/" ancho="320" altura="568" permitido pantalla completa></iframe>
    </body>
</html>

Si vas a pages.github.io y activas las devtools de Chrome para emular un dispositivo con el mismo ancho (320px), se verá mucho más responsivo:

Lo que ocurre aquí es que el navegador en realidad respeta el ancho forzado de la página (980px forzado; no hay consultas de medios en esta página) y escala el contenido para que encaje. Creo que también puede hacer más zoom de texto:

Aquí puedes ver que, aunque el ancho del dispositivo es de 320px, el ancho del componente sigue siendo de 980px. Como todo el componente es visible, debe haber algún tipo de escala de vista .

Para que Grapes sea realmente un editor WYSIWYG de "próxima generación", el modo de respuesta completa parece imprescindible.

¿Alguien tiene alguna idea de cómo podemos lograr el mismo efecto que el emulador de Devtools? ¿Quizá usando Javascript para cambiar dinámicamente el escalado del viewport? ¿O usando transformaciones CSS de forma inteligente?

Respuestas (3)

nojacko• 13 de abril de 2018

Construye tu CSS con 'min-width' en lugar de 'min-device-width', etc. Y todo bien.

tommedema• 13 de abril de 2018

@nojacko eso supone que tengo control sobre el CSS. No es así ;)

Además, el ejemplo anterior no utiliza 'mínimo de ancho de dispositivo'. Simplemente usa 'ancho: 900px'. Los dispositivos pequeños son lo suficientemente inteligentes para escalar en consecuencia. Por tanto, un modo realmente responsive haría lo mismo.

artf• 14 de abril de 2018

Gracias por la sugerencia@tommedema pero ahora mismo no veo ningún valor en empezar a trabajar en esa mejora; la implementación actual funciona si quieres crear una plantilla responsive y eso es lo que realmente importa. Por cierto, si realmente quieres trabajar en esto, los récords personales son bienvenidos :)

Modo dispositivo realmente responsivo

Pregunta

Respuestas (3)

Preguntas y respuestas relacionadas

[PREGUNTA] Bloque no editable después de la plantilla de importación

Incorpora Juice Inliner (o similar) a CSS en línea para la creación de correos HTML

[Pregunta]: Doctype en el iframe de lienzo

PREGUNTA sobre JSON almacenado por el StorageManager

Plugins de pago que cumplen con este problema

Explorar categorías de plugins