iPad Window Height


Recientemenete estaba debuggeando un sitio web y me reportaron una falla con un botón de back to top, que se superponía en el footer, pero únicamente pasaba en iPad.

El funcionamiento del botón era que estuviera posicionado 20px por arriba de la parte superior de la pantalla, sin embargo cuando llegaba al final de la página, se mostraba el footer, el cual tiene contenido que el botón de back to top estaba tapando.

El botón se posicionaba con javascript, y cada que el usuario scrolleaba, se hacía una validación para ver donde se iba a poner el botón: 20px por arriba de la pantalla, ó 20px por arriba del footer cuando el usuario hubiese llegado al final de la página.

La mayor limitante era que tenía que debuggear un iPad, y para lograr eso, se necesita una MAC, conectar el iPad y habilitar unas opciones para poder ver el web inspector en Safari (tal como se haría con un Android en Chrome), cosa que no tenía, ya que trabajo con Windows en la oficina.

El programa funciona más o menos así: obtener la posición del scroll (en qué parte de la página está ubicado el usuario), obtener la posición del footer y posteriormente validar si ya se llegó a la posición del footer para posteriormente subir el botón de back to top unos cuantos pixeles.

Como no tenía manera de debuggear con consola, opté por imprimir valores dentro del botón de back to top para ver si los valores de las posiciones cambiaban y ver qué es lo que estaba haciendo mal.

ipad

En un principio estuve obteniendo la altura de la ventana con la función

$(window).height();

También intente obteniendo el innerHeight y el outerHeight, pero los 3 métodos me regresaban el mismo valor.

En el emulador me daba 1024, pero en el iPad me daba 928. Esta fue una cuestión muy rara pero después analizando un poco, me di cuenta que ese 928 es el valor de mi window porque tengo una barra de estado siempre visible, la cual está robando 96px.

Googleando, encontré que la altura completa de la ventana se obtiene de la siguiente manera:

window.screen.height;

Al hacer las pruebas, esa línea de código me regresaba 1024 que era el valor que estaba buscando.

ipad2

Anuncios
Esta entrada fue publicada el 21 julio, 2016 a las 16:33. Se guardó como Tech y etiquetado como , , , , , , , , . Añadir a marcadores el enlace permanente. Sigue todos los comentarios aquí gracias a la fuente RSS para esta entrada.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: