html - img - meta name= viewport content= width=device-width user-scalable=no
IOS 7-css-altura html-100%=692px (4)
Tengo un error extraño en el modo horizontal del iPad iOS7.
Lo que pude investigar es que en iOS7 window.outerHeight es 692px y window.innerHeight 672px; mientras que en versiones anteriores ambos valores son 672px.
Aunque mis etiquetas <html> y <body> tienen una altura del 100%, parece que hay espacio para desplazarse, y lo extraño es que este problema solo aparece en landscpae
Puede ver de lo que estoy hablando visitando t.cincodias.com, por ejemplo, en un iPad con iOS 7, se cortará la barra de pie de página (o el encabezado a veces). Pero en las versiones anteriores de iOS, el contenido se muestra bien en pantalla completa.
Incluso cuando configuro la altura de ambas etiquetas a la height: 672px !important y position:absolute; bottom: 0; position:absolute; bottom: 0; , aún puede desplazar el contenido verticalmente tocando un iframe (los anuncios son iframes).
Estoy ejecutando la versión candidata de lanzamiento de iOS7
Gracias por cualquier ayuda.
Combinaré las respuestas. ¡Gracias a todos!
Puedes hacer algo como esto:
if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_/d/i)) {
$(''#yourDivID'').height(window.innerHeight);
window.scrollTo(0, 0);
}
Window.scrollTo resuelve el problema de la superposición de barras en el paisaje al girar.
¡Aclamaciones!
Creo que esto es un error en iOS 7: si lo gira al modo vertical, establece ambos (innerHeight / outerHeight) en el mismo valor. Si no es un error, entonces el modo vertical tiene uno porque el comportamiento no es consistente.
Podrías detectar iOS 7 / Safari móvil y usar window.innerHeight si iOS 7.
Reproduzco el mismo problema en iOS 8.
Aquí está mi solución.
Escuché resize , scroll , orientationChange event, para asegurar que cuando el usuario active el cambio de tamaño de la pantalla, invoque la función de restablecer la altura.
Escribí un rebote para evitar llamadas múltiples.
Y está en un cierre y no depende (no jQuery).
(function(){
var setViewportHeight = (function(){
function debounced(){
document.documentElement.style.height = window.innerHeight + "px";
if (document.body.scrollTop !== 0) {
window.scrollTo(0, 0);
}
}
var cancelable = null;
return function(){
cancelable && clearTimeout(cancelable);
cancelable = setTimeout(debounced, 100);
};
})();
//ipad safari
if(/iPad/.test(navigator.platform) && /Safari/i.test(navigator.userAgent)){
window.addEventListener("resize", setViewportHeight, false);
window.addEventListener("scroll", setViewportHeight, false);
window.addEventListener("orientationchange", setViewportHeight, false);
setViewportHeight();
}
})();
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);
}
};
window.addEventListener("scroll", fixViewportHeight, false);
window.addEventListener("orientationchange", fixViewportHeight, false);
fixViewportHeight();
document.body.style.webkitTransform = "translate3d(0,0,0)";
}