ocultar la barra de dirección del iPhone con 100% de altura

Question

Muchas publicaciones sobre esto, pero no del todo para mi situación. Mi página tiene dimensiones flexibles ajustadas al 100% de ancho y al 100% de alto, por lo que la típica función de desplazamiento en carga no funciona. ¿Alguna idea u otra solución?

Gracias!

CSS:

* { 
    margin:0; 
    padding:0; 
} 
html, body { 
    width:100%; 
    height:100%; 
    min-width:960px; 
    overflow:hidden; 
} 

Javascript:

/mobile/i.test(navigator.userAgent) && !pageYOffset && !location.hash && setTimeout(function() { 
    window.scrollTo(0, 1); 
    }, 1000);​ 

Answer 1

tuve problemas con esto también. Inicialmente probé una clase de CSS (.stretch) que definía 200% de altura y desbordamiento visible, y luego alterné esto en el HTML a través del script antes y después de scrollTo. Esto no funciona porque la altura calculada del 100% se refiere a las dimensiones de la ventana gráfica disponibles menos todos los controles cromáticos (colocando la barra de estado de nuevo en su lugar).

Eventualmente tuve que solicitar estilos específicos para aplicar dinámicamente a través de la API de DOM. Para agregar a su fragmento adicional:

var CSS = document.documentElement.style; 

/mobile/i.test(navigator.userAgent) && !pageYOffset && !location.hash && setTimeout(function() { 
    CSS.height = '200%'; 
    CSS.overflow = 'visible'; 

    window.scrollTo(0, 1); 

    CSS.height = window.innerHeight + 'px'; 
    CSS.overflow = 'hidden'; 
}, 1000);​ 

Sin embargo, me gustaría recomendar que se extiende método de Scott Jehl, que se dirige a menores diferencias Android/iOS Safari ScrollTo:

https://gist.github.com/1183357

Answer 2

Esta solución de Nate Smith me ayudó : How to Hide the Address Bar in a Full Screen Iphone or Android Web App.

Aquí es la parte esencial:

var page = document.getElementById('page'), 
    ua  = navigator.userAgent, 
    iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod'); 

var setupScroll = window.onload = function() { 
    // Start out by adding the height of the location bar to the width, so that 
    // we can scroll past it 
    if (ios) { 
    // iOS reliably returns the innerWindow size for documentElement.clientHeight 
    // but window.innerHeight is sometimes the wrong value after rotating 
    // the orientation 
    var height = document.documentElement.clientHeight; 
    // Only add extra padding to the height on iphone/ipod, since the ipad 
    // browser doesn't scroll off the location bar. 
    if (iphone && !fullscreen) height += 60; 
    page.style.height = height + 'px'; 
    } 
    // Scroll after a timeout, since iOS will scroll to the top of the page 
    // after it fires the onload event 
    setTimeout(scrollTo, 0, 0, 1); 
}; 

Para más detalles, echa un vistazo a su blog post o la Gist.