[SOLUCIONADO] Responsive que no funciona

quad22 · #1 (**permalink**) 04/12/2018, 15:52

He creado una página web cuya hoja de estilo contiene:

body { width: 100%; height: 100vh;}
.div de arriba { width: 100%; height: 40vh;}
.div central{ width: 100%; height: 30vh;}
.div de abajo { width: 100%; height: 30vh;}

Con sus correspondientes configuraciones responsive. Abro la página en un smartphone y veo como el navegador pierde un 20% de la página en la parte de abajo (la deja en blanco) y pierde otro 20% a la derecha del mismo (también la deja en blanco), por lo que la página se ve sólo en un 80% del navegador con medio marco blanco abajo y a la derecha.

¿Porqué sucede esto?

quad22 · #2 (**permalink**) 04/12/2018, 16:53

Por cierto: el <head> lleva:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

ArturoGallegos · #3 (**permalink**) 04/12/2018, 20:13

y si utiliza media queries?

quad22 · #4 (**permalink**) 05/12/2018, 08:03

La página ya tiene media queries (hasta 15), desde 1920x1080 hasta 360x640.

ArturoGallegos · #5 (**permalink**) 05/12/2018, 09:00

Esperaba ver mas código pero bueno, dejando eso de lado apliquemos la frase "Hazlo tu mismo"

Haz uso de esta herramienta de google chrome para examinar el código fuente, ver como se renderiza y ve afectado por los estilos
Hoy día basta con conectar tu teléfono a la PC con su cable y depurar desde chrome.
https://developers.google.com/web/to...bugging/?hl=es

quad22 · #6 (**permalink**) 05/12/2018, 21:22

*.html:

<body>

<div class="content">

<div class="arriba">
<img src="img/imagen1.png" alt="img"><h1>Título</h1>
</div>

<div class="centro">
<img src="img/imagen2.png" alt="img"><h5>Subtítulo</h5>
</div>

<div class="abajo">
</div>

</div>

</body>

*.css:

body { overflow: hidden;
width: 100vw; height: 100vh;
margin:0; padding:0; }

.arriba, .centro {
margin: auto; padding: auto;
display: flex; flex-flow: column; flex-direction: column;
justify-content: center; align-items: center;
width: 100%; height: 40vh}

.abajo {
margin: auto; padding: auto;
display: flex; flex-flow: column; flex-direction: column;
justify-content: center; align-items: center;
width: 100%; height: 20vh; margin-top: -0.2em;}

Los tres height suman el 100vh, pero la pantalla del smartphone corta un 20% abajo y un 20% en un lateral (los deja en blanco). Luego el smatphone es chino... a ver si MIUI 10.0 no tiene configuración para desarrollador. Aún no la he encontrado.

quad22 · #7 (**permalink**) 06/12/2018, 08:06

Solucionado. La etiqueta que evita que el smartphone escale a su gusto el viewport es esta:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">