0

Tengo un monitor de 1440x900. Paso el código completo que al ejecutarlo funciona mal en mi monitor (en el ejemplo, la "B" aparece en verde. Esta calculando una altura de 772px). Sin embargo, si este mismo código lo ejecuto utilizando las herramientas para desarrolladores de Chrome o la herramienta de testing https://responsivetesttool.com/ simulando un monitor de 1440x900 funciona bien (en el ejemplo, la "B" aparece en rojo). Desde ya agradecido

.a {
  color: blue;
}

.b {
  color: red;
}

@media screen and (max-height: 800px) {
  .b {
    color: green;
  }
}
<!DOCTYPE html>

<html lang="es">

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="google" content="notranslate">
  <title>Altura</title>
</head>

<body>
  <p>
    <label class="a">A</label>
  </p>
  <p>
    <label class="b">B</label>
  </p>
</body>

</html>

1 respuesta 1

1

No existe ningún error en tu código, el inconveniente se debe a que la resolución total de tu pantalla es de 1440x900 y la altura de la ventana del navegador (viewport) puede ser menor que la altura total de la pantalla si tienes la ventana del navegador en modo de pantalla parcial.

Puedes probar poniendo en pantalla completa la página web desde tu navegador con la tecla F11 o fn + F11 (según tu computador) para verificar el cambio.

3
  • Agradecido por tu respuesta. Efectivamente es como decís, con F11 funciona correctamente pero como imaginarás, no sería muy elegante pedirle a los visitantes a la página, que hagan F11. De ahí me surge esta pregunta: Existe en css alguna expresión, similar al max-height, que me permita "saber" la altura del viewport?. Nuevamente, más que agradecido. Saludos
    – Martín
    Commented el 1 ago. a las 15:22
  • @Martín eso me suena a otra pregunta :) Commented el 3 ago. a las 18:46
  • Es que fue otra pregunta. Omití alguna forma al realizarla?
    – Martín
    Commented el 4 ago. a las 22:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.