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

Estamos viendo problemas con una aplicación web que tiene una altura del 100% en Safari en iOS 7. Parece que window.innerHeight (672px) no coincide con window.outerHeight (692px), pero solo en modo horizontal. Lo que termina sucediendo es que en una aplicación con 100% de altura en el cuerpo, obtienes 20px de espacio extra. Esto significa que cuando un usuario se desliza hacia arriba en nuestra aplicación, los elementos de navegación quedan atrapados detrás del navegador Chrome. También significa que los elementos posicionados absolutamente en la parte inferior de la pantalla terminan siendo 20 píxeles de diferencia.

Este problema también se resumió en esta pregunta aquí: IOS 7 – css – html height – 100% = 692px

Y se puede ver en esta captura de pantalla ambigua: iOS 7 Safari externalHeight problema

Lo que estamos tratando de hacer es hackear esto para que hasta que Apple solucione el error, no tengamos que preocuparnos por eso.

Una forma de hacer esto es posicionar el cuerpo absolutamente solo en iOS 7, pero esto pone los 20 píxeles extra en la parte superior de la página en lugar de la parte inferior:

body { position: absolute; bottom: 0; height: 672px !important; } 

Cualquier ayuda para forzar outerHeight para que coincida con innerHeight, o piratearla para que nuestros usuarios no puedan ver este problema sería muy apreciada.

En mi caso, la solución fue cambiar el posicionamiento a fijo:

 @media (orientation:landscape) { html.ipad.ios7 > body { position: fixed; bottom: 0; width:100%; height: 672px !important; } } 

También usé un script para detectar iPad con iOS 7:

 if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) { $('html').addClass('ipad ios7'); } 

Solución simple, más limpia y de CSS:

 html { height: 100%; position: fixed; width: 100%; } 

iOS 7 parece establecer la altura correctamente con esto. Además, no es necesario cambiar el tamaño de los eventos de javascript, etc. Dado que está trabajando con una aplicación de altura completa, realmente no importa si siempre está fijada la posición.

La respuesta de Samuel, como también dijo Terry Thorsen, está funcionando bien, pero falla en caso de que la página web se haya agregado a la casa de iOS.

Una solución más intuitiva sería comprobar si hay window.navigator.standalone var.

 if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) && !window.navigator.standalone) { $('html').addClass('ipad ios7'); } 

De esta manera, solo se aplica cuando se abre dentro de Safari, y no si se inicia desde casa.

La respuesta de Samuel es la mejor, aunque se rompe si un usuario agrega la página a su pantalla de inicio (las páginas de la pantalla de inicio no muestran el error). Verifique el interior de la vista antes de agregar la clase de esta manera:

 if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) { if(window.innerHeight==672){ $('html').addClass('ipad ios7'); } } 

Tenga en cuenta que el error tampoco se muestra en la vista web.

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)"; } 

Una variante del enfoque de Samuel, pero con posición: -webkit-sticky set en html funcionó para mí de la mejor manera.

 @media (orientation:landscape) { html.ipad.ios7 { position: -webkit-sticky; top: 0; width: 100%; height: 672px !important; } } 

Observe ‘arriba: 0’, no ‘abajo: 0’, y el elemento objective es ‘html’, no ‘cuerpo’

Básicamente, hay dos errores: la altura de la ventana en el modo horizontal y la posición de desplazamiento cuando el usuario lo revisa desde el modo vertical. Lo hemos resuelto de esta manera:

la altura de la ventana está controlada por:

 // window.innerHeight is not supported by IE var winH = window.innerHeight ? window.innerHeight : $(window).height(); // set the hight of you app $('#yourAppID').css('height', winH); // scroll to top window.scrollTo(0,0); 

ahora, lo anterior se puede poner en una función y vincularse al tamaño de la ventana y / o eventos de cambio de orientación. eso es todo … ver ejemplo:

http://www.ajax-zoom.com/examples/example22.php

Necesita JavaScript para solucionar este error. window.innerHeight tiene la altura correcta. Aquí está la solución más simple que puedo pensar:

 $(function() { function fixHeightOnIOS7() { var fixedHeight = Math.min( $(window).height(), // This is smaller on Desktop window.innerHeight || Infinity // This is smaller on iOS7 ); $('body').height(fixedHeight); } $(window).on('resize orientationchange', fixHeightOnIOS7); fixHeightOnIOS7(); }); 

También necesitarás establecer la position: fixed en el .

Aquí hay un ejemplo completo y funcional:

       iOS7 height bug fix      

Lorem ipsum dolor sit amet.

Con referencia a la respuesta aceptada, también he tenido suerte con la siguiente regla:

 html.ipad.ios7 { position: fixed; width: 100%; height: 100%; } 

Esto tiene la ventaja adicional de que parece detener el elemento html que se desplaza “debajo” de un elemento de cuerpo fijo.

Si uso esto:

 if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) && !window.navigator.standalone) { $('html').addClass('ipad ios7'); } 

My Safari en Mac muestra las mismas clases de html … ASÍ NO está funcionando correctamente.

Traté de combinar algunas cosas, eso funcionó para mí, así que puedo administrarlo en el navegador y sin la vista del navegador.

jQuery

 if (navigator.userAgent.match(/iPad/i) && (window.orientation) ){ $('html').addClass('ipad '); if (window.innerHeight != window.outerHeight ){ $('html').addClass('browser landscape'); } else{ $('html').addClass('browser portrait'); } } 

CSS

 @media (orientation:landscape) { html.ipad.browser > body { position: fixed; height: 671px !important; } } 

///// Con esto eres más flexible u otro sistema operativo y navegadores

Encontré esta página para el mismo problema. Aquí hay muchas respuestas útiles y otras no (para mí).

Sin embargo, encontré una solución, que funciona en mi caso, y funciona de manera totalmente independiente de qué versión del sistema operativo y qué error ahora o en el pasado o en el futuro.

Explicación: Desarrollar una aplicación web (sin aplicación nativa) con varios módulos de tamaño fijo en pantalla completa, con el nombre de clase “módulo”

 .module {position:absolute; top:0; right:0; bottom:0; left:0;} 

que contiene un pie de página con el nombre de clase “pie de página”

 .module > .footer {position:absolute; right:0; bottom:0; left:0; height:90px;} 

No importa, si configuro la altura del pie de página más tarde a otra altura, o incluso su altura se establece por su contenido, puedo usar este código siguiente para la corrección:

 function res_mod(){ $('.module').css('bottom', 0); // <-- need to be reset before calculation var h = $('.module > .footer').height(); var w = window.innerHeight; var o = $('.module > .footer').offset(); var d = Math.floor(( w - o.top - h )*( -1 )); $('.module').css('bottom',d+'px'); // <--- this makes the correction } $(window).on('resize orientationchange', res_mod); $(document).ready(function(){ res_mod(); }); 

Gracias a las habilidades de Matteo Spinelli, todavía puedo usar iScroll sin problemas, ya que afortunadamente se activan sus cambios. De lo contrario, sería necesario volver a llamar a iScroll-init después de la corrección.

Espero que esto ayude a alguien

La respuesta aceptada no funciona cuando se muestra la barra de favoritos. Aquí hay una corrección mejorada de catch all:

 @media (orientation:landscape) { html.ipad.ios7 > body { position: fixed; height: calc(100vh - 20px); width:100%; } } 

que tal si lo intentas

 html{ bottom: 0;padding:0;margin:0}body { position: absolute; bottom: 0; height: 672px !important; }