javascript - Determinar el ancho de una página web en pulgadas

Tengo una hoja de estilo CSS que utiliza consultas de medios para cambiar cómo se muestra una página según cuántas pulgadas tenga de ancho (por ejemplo, si es menor de 4 pulgadas o se muestra en un dispositivo de mano, asume un LAF más amigable para móviles).

El problema que tengo es con su contenido. En la página de inicio, hay una interfaz estilo dock que cambia dinámicamente de altura según la altura y el ancho actuales de la ventana para que el texto y los elementos nunca salgan de la pantalla. Sin embargo, mi JS, que determina este tamaño, no sabe cuándo ha cambiado la hoja de estilo para dispositivos portátiles o pantallas pequeñas, por lo que el comportamiento continúa siendo impredecible en este modo. ¿Cómo puedo usar JavaScript para detectar cuándo la página tiene menos de o igual a 4 pulgadas para que pueda desactivar el redimensionamiento automático del dock reformado?

Respuesta #1

Es un problema no trivial.

Aquí hay un enlace a un sitio que tiene una función (getUnits) para obtener el estilo calculado actual en una unidad de medida de tu elección (incluyendo pulgadas) https://web.archive.org/web/20120427144951/http://upshots.org:80/javascript/javascript-get-current-style-as-any-unit

Usando esta función, podrías verificar if (getUnits(document.body, "width").inch < 4). La forma en que funciona esta función, para quienes tengan curiosidad, es creando un elemento temporal en el espacio de medición deseado y leyendo la proporción con respecto a los píxeles. De esta manera, dejas que el navegador responda basado en su propio conocimiento del PPI del dispositivo. Así que esto es una especie de polyfill para window.devicePixelRatio, sin embargo, los navegadores generalmente mienten sobre su PPI. Para estos propósitos, sin embargo, no importa ya que aplicarán la misma mentira a tu CSS con unidades en pulgadas.

Respuesta #2

No pruebo esto en navegadores reales, pero debería funcionar:

establece un <div id="screen" style="display:none"> oculto en tu HTML.

En CSS, utiliza una consulta de medios así:

  @media screen
  { div#screen{color: blue;} }

  @media screen and (min-width: 13in)
  { div#screen{color: red;} }

Luego puedes leer el color de div#screen en JS para elegir las acciones.

Además, deberías tener en cuenta el evento de redimensionamiento de ventanas en JS.