javascript - orientationchange - Cómo determinar el ancho y la altura reales de la ventana gráfica en iOS
mapkit js (2)
Me he quedado atascado en una tarea tan sencilla como determinar el ancho y el alto de la página en iOS cuando el usuario hace zoom en la página.
El problema es que algunos sitios web tienen un diseño extraño y se ve así:
Esta es una página sin escala y tiene una resolución de 1164x1811 píxeles y eso es correcto. Tengo estos valores de window.innerWidth y window.innerHeight . El área resaltada es un elemento del cuerpo y tiene una resolución de 1024x1594 píxeles, lo que importa.
A continuación, uso la función de pellizcar para ampliar la página y así es como se ve:
Ahora, cuando intento obtener el tamaño de la página, tengo 1024x1594 píxeles de window.innerWidth y window.innerHeight respectivamente. Estos valores son exactamente iguales al tamaño del cuerpo.
Entonces la pregunta es cómo obtener el tamaño de página correcto, ya sea con zoom o no.
También he probado este caso en particular en Chrome y obtengo el resultado correcto: siempre tiene 1164x1811 píxeles independientemente del zoom.
Aquí hay una manera más complicada pero un poco inútil: hacer un elemento de tamaño de página y luego calcular / obtener su tamaño real.
let page_size = { height: null, width: null };
{
let div = document.createElement(''div'');
(styles => Object.keys(styles).forEach(k => div.style[k] = styles[k]))({
height: ''100vh'', width: ''100vw'',
position: ''fixed'',
top: ''-100vh'', left: ''-100vw''
})
document.body.appendChild(div);
page_size.height = div.offsetHeight;
page_size.width = div.offsetWidth;
}
EDITAR: use document.body.clientWidth y document.body.clientHeight para obtener los cálculos que desea, ya que mi solución original ahora se considera obsoleta.
Puede usar document.width y document.height
Aquí hay una prueba en el antiguo sitio de Space Jam (que me vino a la mente cuando traté de pensar en un sitio que definitivamente no respondería).
