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

ios7

Question

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:

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.

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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%;
  }
}

Answer 6

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.

Answer 7

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.

Answer 8

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 <body> .

Aquí hay un ejemplo completo y funcional:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <title>iOS7 height bug fix</title>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script>
            $(function() {
                function fixHeightOnIOS7() {
                    var fixedHeight = Math.min(
                        $(window).height(),
                        window.innerHeight || Infinity
                    );
                    $(''body'').height(fixedHeight);
                }

                $(window).on(''resize orientationchange'', fixHeightOnIOS7);
                fixHeightOnIOS7();

                // Generate content
                var contentHTML = $(''#content'').html();
                for (var i = 0; i < 8; i++) contentHTML += contentHTML;
                $(''#content'').html(contentHTML);
            });
        </script>
        <style>
            html,
            body
            {
                margin: 0;
                padding: 0;
                height: 100%;
                width: 100%;
                overflow: auto;
                position: fixed;
            }
            #page-wrapper
            {
                height: 100%;
                position: relative;
                background: #aaa;
            }
            #header,
            #footer
            {
                position: absolute;
                width: 100%;
                height: 30px;
                background-color: #666;
                color: #fff;
            }
            #footer
            {
                bottom: 0;
            }
            #content
            {
                position: absolute;
                width: 100%;
                top: 30px;
                bottom: 30px;
                overflow: auto;
                -webkit-overflow-scrolling: touch;
            }
        </style>
    </head>
    <body>
        <div id="page-wrapper">
            <div id="header">Header</div>
            <div id="content">
                <p>Lorem ipsum dolor sit amet.</p>
            </div>
            <div id="footer">Footer</div>
        </div>
    </body>
</html>

Answer 9

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

Answer 10

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.

Answer 11

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 objetivo es ''html'', no ''cuerpo''

Answer 12

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

Answer 13

que tal si lo intentas

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