iPhone adres çubuğunu% 100 yükseklik ile gizleyin

Question

Bu konuyla ilgili pek çok ileti var, ancak durumum için değil. Sayfamda% 100 genişlik ve% 100 yükseklik olarak ayarlanan esnek boyutlar var, bu nedenle normal yükleme kaydırma işlevi çalışmıyor. Herhangi bir düşünce ya da başka çözümler?

Teşekkürler!

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

Ben de bu ile mücadele etti. İlk olarak,% 200 yüksekliğini ve taşmasını görünür kılan bir CSS sınıfı (.stretch) denedim, daha sonra bu komutu, scrollTo'den önce ve sonra HTML aracılığıyla betik üzerinde değiştirdim. Bu, hesaplanan% 100 yüksekliğin tüm tarayıcı kromu (durum çubuğunu yeniden yerine oturtulur) eksi olarak mevcut görünüm boyutlarına geri göndermesi nedeniyle çalışmaz.

Sonuçta DOM API aracılığıyla dinamik olarak uygulanacak belirli stiller isteğinde bulunmak zorunda kaldım. sizin ek Snippet'te eklemek için:

Ben minör Android/iOS Safari scrollTo farklılıkları giderir Scott Jehl'in yöntemini uzanan öneririm Ancak

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);​ 

:

https://gist.github.com/1183357

Answer 2

Nate Smith'ten Bu çözüm bana yardımcı oldu : How to Hide the Address Bar in a Full Screen Iphone or Android Web App. blog post veya Gist onun ederek daha fazla ayrıntı için

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

:

İşte temel kısmı.