Discrepancia en el diseño horizontal de Safari en iOS 7: altura interior frente a altura exterior

En iOS 7 Safari para iPad, surge un problema peculiar con las aplicaciones web que utilizar el 100% de la altura. Los valores window.innerHeight (672px) y window.outerHeight (692px) divergen únicamente en modo horizontal. Esta discrepancia da como resultado 20 píxeles adicionales de espacio no utilizado, lo que afecta el diseño de los elementos de navegación y los elementos absolutamente posicionados en la parte inferior de la pantalla.

Para mitigar este problema hasta que Apple lo resuelva, los desarrolladores han recurrido a soluciones alternativas. Un enfoque implicó posicionar absolutamente el cuerpo en iOS 7, cambiando efectivamente el espacio de 20px hacia la parte superior de la página en lugar de hacia la parte inferior. Sin embargo, ha surgido una solución más eficaz.

Al configurar la posición del cuerpo como fija, se puede evitar el problema:

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

Para identificar dispositivos iPad que ejecutan iOS 7, se puede emplear el siguiente script:

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

Al implementar esta solución alternativa, los desarrolladores pueden garantizar un comportamiento de diseño adecuado en iOS 7 Safari para iPad, eliminando la problemática discrepancia de altura y su impacto en la navegación y el posicionamiento.