Bir mobil web uygulamasında adres çubuğunu kaldırmak için çapraz platform yöntemi

Bir mobil web uygulamasında çalışıyorum ve adres çubuğunu kaldırmaya çalışıyorum. <body>'un doğal yüksekliği kaymaya izin vermek için yeterince uzun olmadıkça, yeterince kolay. Ben güvenilir bir iphone/android, <body> adres çubuğunun kaybolmasına izin vermek için yeterince uzun olduğunu garanti çapraz cihaz yöntemi bulamıyorum deneyin. Gördüğüm yöntemlerin çoğu, screen.height belgesine güveniyor. Adres çubuğunun gitmesine ve daha uzun olmamasına izin vermek için yeterince uzun olması gerekir!Bir mobil web uygulamasında adres çubuğunu kaldırmak için çapraz platform yöntemi

Bunu mükemmel işleyen bir komut dosyası var mı? Ben iphone ve android için adres çubuğunun eksi sayfanın yüksekliğini belirlemek için ihtiyacım var.

denedim:

screen.height //too tall 
window.innerHeight //too short 
document.documentElement.clientHeight //too short 
document.body.clientHeight //almost but too short

JQUERY izin verdi.

kaynak

2012-03-13 Fresheyeball

.. u $ deneyebilirsiniz (pencere) .height(); veya $ (belge) .height(); –

İkisini de denedim. $ (window), adres çubuğuna sahip pencerenin yüksekliğini sağlar. $ (document), söz konusu sayfanın çok kısa yüksekliğine bağlı olarak bu yükseklikten daha azını sağlar. – Fresheyeball

Benzer bir problemim çok uzun zaman önce değil, benzer şekilde stresliyim. Bu kod gerçekten bana yardımcı oldu: http://menacingcloud.com/?c=iPhoneAddressBar –

This site da birkaç diğer öneri vardır, ancak bu hiç akıllıca, hiç endişe biri github:gist mevcuttur ve (kolaylık olması açısından burada yapıştırılan) soru cevap verir: Bildiğim kadarıyla olabildiğince

function hideAddressBar() 
{ 
    if(!window.location.hash) 
    { 
     if(document.height < window.outerHeight) 
     { 
      document.body.style.height = (window.outerHeight + 50) + 'px'; 
     } 

     setTimeout(function(){ window.scrollTo(0, 1); }, 50); 
    } 
} 

window.addEventListener("load", function(){ if(!window.pageYOffset){ hideAddressBar(); } }); 
window.addEventListener("orientationchange", hideAddressBar);

Ek olarak, sayfaya eklenen fazladan yükseklik kombinasyonu (sizin için sorunlara neden oldu) ve scrollTo() deyimi, adres çubuğunun kaybolmasını sağlar.

aynı siteden

adres çubuğu gizleme 'basit' çözüm scrollTo() yöntemini kullanarak:

Bu kullanıcı kaydırma kadar adres çubuğunu gizler. Bir zaman aşımı işlevi içinde

This site yerler aynı yöntemi (gerekçesi izah edilmez, ancak kod onsuz iyi çalışmıyor iddia): jquery etkinse

// When ready... 
window.addEventListener("load",function() { 
    // Set a timeout... 
    setTimeout(function(){ 
    // Hide the address bar! 
    window.scrollTo(0, 1); 
    }, 0); 
});

kaynak

2012-04-01 19:41:48 ramblinjan

son kod bloğu bu zorluğu giderir. Ama +50 ile ele alıyor. Tüm durumlarda adres çubuğunun 50px yüksek olduğunu nasıl bilebiliriz? – Fresheyeball

Aslında bir çözüm sunacak olan ilk kişi olduğun için bir önerin var. – Fresheyeball

50px az çok keyfi, inanıyorum. ScrollTo (0, 1) ifadesi, bu fazladan miktarın, yüksekliği çok büyük ayarladığınızda karşılaştığınız aynı sorunu oluşturmaması için yapar. Anladığım kadarıyla, her durumda çalışmasını sağlayan ikisinin kombinasyonu. – ramblinjan

Çalışma şeklinin, sayfanın sığmaması durumunda adres çubuğunun gizlendiğini düşünüyorum. Yani bir sayfa tam olarak adres çubuğu, yani window.outerHeight, dahil olmak üzere pencerenin yüksekliğini istiyorsun, hayır?

kaynak

2012-04-01 19:37:45

Sayfanın kullanılabilir yüksekliğini adres çubuğuna MINUS arıyorum. Aksi takdirde '$ (window) .height()' iyi çalışırdı. – Fresheyeball

Hm, ancak bu adres çubuğunu gizleme konusunda nasıl yardımcı olur? –

Bazı sayfalarda çok az içerik var. Dolayısıyla sayfa doğal olarak sadece 20 piksel yükseklikte olabilir. Bu yüzden üstüne kaydırmak hiçbir şey yapmaz. Adres çubuğundan kurtulmanın tek yolu, sayfanın üst tarafa doğru kaydırılmasının yeterince uzun olmasını sağlamaktır. Bu yüksekliği bulmak problem. – Fresheyeball

Bir mobil web uygulamasında adres çubuğunu kaldırmak için çapraz platform yöntemi

cevap

İlgili konular