Discrepância de layout de paisagem do iOS 7 Safari: innerHeight vs. outerHeight

No iOS 7 Safari para iPad, surge um problema peculiar com aplicativos da web que utilizar 100% de altura. Os valores window.innerHeight (672px) e window.outerHeight (692px) divergem apenas no modo paisagem. Essa discrepância resulta em 20px extras de espaço não utilizado, afetando o layout dos elementos de navegação e elementos absolutamente posicionados na parte inferior da tela.

Para mitigar esse problema até que a Apple o resolva, os desenvolvedores recorreram a soluções alternativas. Uma abordagem envolveu o posicionamento absoluto do corpo no iOS 7, mudando efetivamente a lacuna de 20px para a parte superior da página, em vez de para a parte inferior. No entanto, surgiu uma solução mais eficaz.

Ao definir o posicionamento do corpo como fixo, o problema pode ser contornado:

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

Para identificar dispositivos iPad executando iOS 7, o seguinte script pode ser empregado:

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

Ao implementar esta solução alternativa, os desenvolvedores podem garantir o comportamento adequado do layout no iOS 7 Safari para iPad, eliminando a problemática discrepância de altura e seu impacto na navegação e no posicionamento.