jQuery/JS, iOS 4 y $ (document) .height() problemas

Question

Me he encontrado con un problema extraño con lo que parecen ser varias versiones de los navegadores Webkit. Estoy tratando de colocar un elemento en el centro de la pantalla y para hacer los cálculos, necesito obtener varias dimensiones, específicamente la altura del cuerpo y la altura de la pantalla. En jQuery He estado usando:

var bodyHeight = $('body').height(); 
var screenHeight = $(window).height(); 

Mi página es típicamente mucho más alto que la ventana gráfica actual, por lo que cuando 'alerta' esas variables, bodyheight que debe llegar a ser grande, mientras que ScreenHeight debe permanecer constante (altura de la ventana del navegador).

Esto es cierto en - Firefox - Chrome 15 (Whoa Cuando hizo Chrome llegar a la versión 15!?) - Safari en IOS5

Esto no está funcionando en: - Safari en iOS4 - Safari 5.0.4

en los dos últimos, $(window).height(); siempre devuelve el mismo valor que $('body').height()

Pensando que era tal vez un tema de jQuery, cambié la altura de la ventana para window.outerHeight pero eso, también, hace lo mismo, haciéndome pensar que esto es en realidad algún tipo de problema de webkit.

¿Alguien se ha encontrado con esto y sabe cómo evitar este problema?

Para complicar las cosas, parece que no puedo replicar esto de forma aislada. Por ejemplo: http://jsbin.com/omogap/3 funciona bien.

He determinado que no es un problema de CSS, así que tal vez haya otros JS causando estragos en este navegador en particular que necesito encontrar.

Answer 1

He estado luchando con esto durante mucho tiempo (debido a bug of my plugin) y he encontrado la manera de obtener la altura de ventana correcta en Mobile Safari.

Funciona correctamente independientemente del nivel de zoom sin subtracting height of screen with predefined height of status bars (que puede cambiar en el futuro). Y funciona con el modo de pantalla completa iOS6.

Algunas pruebas (en el iPhone con un tamaño de pantalla de 320x480, en modo horizontal):

// Returns height of the screen including all toolbars 
// Requires detection of orientation. (320px for our test) 
window.orientation === 0 ? screen.height : screen.width 


// Returns height of the visible area 
// It decreases if you zoom in 
window.innerHeight 


// Returns height of screen minus all toolbars 
// The problem is that it always subtracts it with height of the browser bar, no matter if it present or not 
// In fullscreen mode it always returns 320px. 
// Doesn't change when zoom level is changed. 
document.documentElement.clientHeight 

aquí es cómo se detecta altura:

var getIOSWindowHeight = function() { 
    // Get zoom level of mobile Safari 
    // Note, that such zoom detection might not work correctly in other browsers 
    // We use width, instead of height, because there are no vertical toolbars :) 
    var zoomLevel = document.documentElement.clientWidth/window.innerWidth; 

    // window.innerHeight returns height of the visible area. 
    // We multiply it by zoom and get out real height. 
    return window.innerHeight * zoomLevel; 
}; 

// You can also get height of the toolbars that are currently displayed 
var getHeightOfIOSToolbars = function() { 
    var tH = (window.orientation === 0 ? screen.height : screen.width) - getIOSWindowHeight(); 
    return tH > 1 ? tH : 0; 
}; 

Dicha técnica tiene sólo una con: no es perfecto en píxeles cuando se amplía la página (porque window.innerHeight siempre devuelve el valor redondeado). También devuelve un valor incorrecto cuando se acerca la barra superior.

Ha pasado un año desde que hizo esta pregunta, pero de todos modos ¡espero que esto ayude! :)

Answer 2

Tuve un problema similar.Tenía que ver con 2 cosa:

Box-dimensionamiento de la propiedad CSS3: En el .height() jQuery documentation he encontrado esto:

Tenga en cuenta que .height() siempre devuelve la altura del contenido, independientemente de la valor de la propiedad de dimensionamiento de caja de CSS. A partir de jQuery 1.8, esto puede requerir la recuperación de la altura de CSS más la propiedad de tamaño de caja y luego restar cualquier posible borde y relleno en cada elemento cuando el elemento tiene tamaño de caja: border-box. Para evitar esta penalización, utilice .css ("altura") en lugar de .height().

Esto puede aplicarse a $('body').height().

documento listo vs Window.load

$(document).ready() se ejecuta cuando el DOM está listo para JS pero es posible que las imágenes no han terminado de cargar aún. Usar $(window).load() solucionó mi problema. Read more.

Espero que esto ayude.

Answer 3

Una solución navegador cruz se establece que por jQuery

Utilice esta propiedad: $(window).height()

Esto devuelve un valor int que representa el tamaño de altura de la pantalla visible de navegador en píxeles.

Answer 4

Prueba esto:

var screenHeight = (typeof window.outerHeight != 'undefined')?Math.max(window.outerHeight, $(window).height()):$(window).height() 

Answer 5

Es 2015, estamos en iOS 8 ahora. iOS 9 ya está a la vuelta de la esquina. Y el problema todavía está con nosotros. Suspiro.

He implementado una solución de varios navegadores para el tamaño de la ventana en jQuery.documentSize. Se mantiene al margen de cualquier tipo de rastreo de navegador y ha sido sometido a pruebas exhaustivas. Así es como funciona:

• llamada $.windowHeight() para la altura de la visual viewport. Esa es la altura del área que realmente ve en la ventana gráfica en el nivel de zoom actual, en píxeles CSS.
• Llamada $.windowHeight({ viewport: "layout" }) para la altura de layout viewport. Esa es la altura que tendría el área visible con un zoom de 1: 1: la "altura de la ventana original".

Simplemente seleccione la ventana gráfica adecuada para su tarea y listo.

Detrás de escena, el cálculo sigue aproximadamente el procedimiento descrito en el answer by @DmitrySemenov. He escrito sobre los pasos involucrados elsewhere on SO. Compruébelo si está interesado, o eche un vistazo al source code.