javascript - Ipad: window.height() da mal valor en Safari pero no en Chrome

Question

Tengo que obtener la altura de la ventana en Ipad para mostrar algo en toda su altura.

He hecho esta página de ejemplo: http://daviddarx.com/stuffs/work/biceps/ipad/

Aquí está mi código js, ​​muy simple, que solo escribe window.height () en el cuerpo:

generalResizeListener=function(){
    screenW=$(window).width();
    screenH=$(window).height();
    $("body").html(screenH)
    console.log(screenH);
}
$(window).resize(generalResizeListener);

Hay dos problemas en mi ipad2 con IOS7: en safari, pero no en Chrome, el valor mostrado no se ajusta a la altura real de la página (comprobé capturas de pantalla)

-En Safari siempre, incluso si no hay nada en la página, la altura de la página es más grande que la ventana gráfica y puedo desplazarme hacia abajo para ver algo como 10-20px. Ese es el mayor problema.

¿Sabes por qué está pasando esto? No tengo ningún archivo CSS en mi página de demostración, así que realmente no entiendo.

¡Gracias de antemano por su ayuda! David

@Gal V:

Ya implementé esta "solución hacky". ¡Gracias por tu respuesta, de todos modos! Miré un poco más en Google y parece ser un error específico de Safari IOS7:

- https://discussions.apple.com/message/23150650#23150650

- Problemas de desplazamiento en una página web con encabezado y pie de página fijo en iOS7

- iOS 7 iPad Safari Paisaje innerHeight / outerHeight problema de diseño

Answer 1

El navegador Safari en iOS tiene una barra inferior (a diferencia de Chrome) que se calcula dentro del alto de la ventana, mientras que no es realmente parte de la ventana / página.

necesita detectar casos (con user-agent) donde el cliente usa el navegador Safari en el dispositivo iOS, y luego necesita establecer la altura del cuerpo (con javascript) en $(window).height() - bar_height , y debería resolver tu problema

Espero que ayude.

Answer 2

Usé esta solución de JavaScript para resolver ese problema:

    if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_/d/i) && window.innerHeight != document.documentElement.clientHeight) {
  var fixViewportHeight = function() {
    document.documentElement.style.height = window.innerHeight + "px";
    if (document.body.scrollTop !== 0) {
      window.scrollTo(0, 0);
    }
  }.bind(this);

  window.addEventListener("scroll", fixViewportHeight, false);
  window.addEventListener("orientationchange", fixViewportHeight, false);
  fixViewportHeight();

  document.body.style.webkitTransform = "translate3d(0,0,0)";
}

Answer 3

Mi solución es esta ...

Inserta esto en tu página:

<div id="win-height" style="position: fixed;left: 0; top: 0; bottom:0; width: 0; z-index: "></div>

en lugar de,

$(window).height()

para obtener la altura de la ventana, use,

$(''#win-height'').height()

¡Buena suerte!