Se zařízeními s iOS i Androidem, která používají WebKit jako vykreslovací engine svého prohlížeče, mají weboví vývojáři mnoho výhod:
- Vykreslovací modul s možností bezchybných animací CSS
- Vykreslovací modul, který je rychlý...velmi rychle
- Vykreslovací modul, který je moderní a progresivní
Tyto výhody nám umožňují vytvářet webové aplikace v tomto prohlížeči, které vypadají stejně dobře jako nativní aplikace. Pokud je vaším cílem vytvářet webové aplikace, které vypadají jako nativní aplikace, záleží na detailech. Jeden z těchto detailů: skrytí adresního řádku. Nativní aplikace nemají adresní řádky, tak proč by měla vaše aplikace? Jako další bonus vám skrytí adresního řádku poskytne dalších 60 pixelů prostoru!
Možná si myslíte, že skrytí adresního řádku v mobilním prohlížeči je obtížné, ale byli byste překvapeni, jak jednoduché to je. Vše, co potřebujete, je dotek JavaScriptu!
JavaScript
// When ready...
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});
window.scrollTo metoda je klíčem ke skrytí adresního řádku. Obal setTimeout iPhone vyžaduje funkci, aby správně skryl adresní řádek – nepoužívá setTimeout způsobí problémy.
Bonus:META Tag pro stránky v záložkách
Pokud uživatel přidal vaši webovou aplikaci na svůj odrazový můstek, může následující metaznačka odstranit horní lištu z prohlížeče:
<meta name="apple-mobile-web-app-capable" content="yes" />
A to je vše! Adresní řádek je skrytý, dokud uživatel nepřejede prstem dolů poblíž horní lišty aplikace. Se skrytým adresním řádkem může vaše webová aplikace vypadat jako nativní aplikace!