Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Responsive que no funciona

Estas en el tema de Responsive que no funciona en el foro de CSS en Foros del Web. He creado una página web cuya hoja de estilo contiene: body { width: 100%; height: 100vh;} .div de arriba { width: 100%; height: 40vh;} .div ...
  #1 (permalink)  
Antiguo 04/12/2018, 15:52
 
Fecha de Ingreso: noviembre-2009
Mensajes: 265
Antigüedad: 9 años
Puntos: 2
Responsive que no funciona

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?
  #2 (permalink)  
Antiguo 04/12/2018, 16:53
 
Fecha de Ingreso: noviembre-2009
Mensajes: 265
Antigüedad: 9 años
Puntos: 2
Respuesta: Responsive que no funciona

Por cierto: el <head> lleva:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  #3 (permalink)  
Antiguo 04/12/2018, 20:13
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.191
Antigüedad: 10 años, 9 meses
Puntos: 1016
Respuesta: Responsive que no funciona

y si utiliza media queries?
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #4 (permalink)  
Antiguo 05/12/2018, 08:03
 
Fecha de Ingreso: noviembre-2009
Mensajes: 265
Antigüedad: 9 años
Puntos: 2
Respuesta: Responsive que no funciona

La página ya tiene media queries (hasta 15), desde 1920x1080 hasta 360x640.
  #5 (permalink)  
Antiguo 05/12/2018, 09:00
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.191
Antigüedad: 10 años, 9 meses
Puntos: 1016
Respuesta: Responsive que no funciona

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
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #6 (permalink)  
Antiguo 05/12/2018, 21:22
 
Fecha de Ingreso: noviembre-2009
Mensajes: 265
Antigüedad: 9 años
Puntos: 2
Respuesta: Responsive que no funciona

*.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.
  #7 (permalink)  
Antiguo 06/12/2018, 08:06
 
Fecha de Ingreso: noviembre-2009
Mensajes: 265
Antigüedad: 9 años
Puntos: 2
Respuesta: Responsive que no funciona

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">



La zona horaria es GMT -6. Ahora son las 14:03.