2013-03-02 3 views
4

На данный момент я пишу какое-то веб-приложение, и я хочу скрыть адресную строку на устройствах iOS и желательно также на устройствах Android.
Обычно я делаю это сСкрыть адресную строку не работает - необходим пуленепробиваемый подход

window.addEventListener('load', function() { 
    setTimeout(function() { 
    window.scrollTo(0, 1); 
    }, 0); 
}); 

, но это не будет работать сейчас, потому что страница не достаточно контента для прокрутки.
Теперь я знаю, что это распространенная проблема, и я знаю, что существует несколько решений, но я бы предпочел небольшое пуленепробиваемое решение.
На самом деле я был очень счастлив, когда я нашел этот вопрос: http://stackoverflow.com/questions/9678194/cross-platform-method-for-removing-the-address-bar-in-a-mobile-web-app

где был размещен этот код:

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

К сожалению, это не работает для меня. Я вижу, что что-то происходит, потому что некоторые элементы, которые имеют padding-top, устанавливаются в процентах, перемещаются вниз, но адресная строка остается.

Конечно, я также выполнил поиск Google и попробовал множество фрагментов, которые я нашел. Некоторые ничего не сделали, некоторые просто переместили элементы с padding-top немного.
Единственные работающий код, который я нашел это:

var page = document.getElementById('page'), 
    ua = navigator.userAgent, 
    iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod'), 
    ipad = ~ua.indexOf('iPad'), 
    ios = iphone || ipad, 
    // Detect if this is running as a fullscreen app from the homescreen 
    fullscreen = window.navigator.standalone, 
    android = ~ua.indexOf('Android'), 
    lastWidth = 0; 

if (android) { 
    // Android's browser adds the scroll position to the innerHeight, just to 
    // make this really difficult. Thus, once we are scrolled, the 
    // page height value needs to be corrected in case the page is loaded 
    // when already scrolled down. The pageYOffset is of no use, since it always 
    // returns 0 while the address bar is displayed. 
    window.onscroll = function() { 
    page.style.height = window.innerHeight + 'px' 
    } 
} 
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'; 
    } else if (android) { 
    // The stock Android browser has a location bar height of 56 pixels, but 
    // this very likely could be broken in other Android browsers. 
    page.style.height = (window.innerHeight + 56) + '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); 
}; 
(window.onresize = function() { 
    var pageWidth = page.offsetWidth; 
    // Android doesn't support orientation change, so check for when the width 
    // changes to figure out when the orientation changes 
    if (lastWidth == pageWidth) return; 
    lastWidth = pageWidth; 
    setupScroll(); 
})(); 

Source

Но я не очень счастлив с этим решением, поскольку я не являюсь другим UA нюхает.

Есть ли у вас какие-либо предложения, что я мог бы попытаться заставить его работать без UA нюхать? Может ли это быть мой HTML-код, который вызывает проблемы с некоторыми сценариями, которые я опубликовал?

ответ

1

Не знаю, является ли это пуленепробиваемым, но работает на связке устройств. Если вы найдете предостережение, дайте мне знать.

if (((/iphone/gi).test(navigator.userAgent) || (/ipod/gi).test(navigator.userAgent)) && 
    (!("standalone" in window.navigator) && !window.navigator.standalone)) { 
    offset = 60; 
    $('body').css('min-height', (window.innerHeight + offset) + 'px'); 
    setTimeout(function(){ window.scrollTo(0, 1); }, 1); 
} 

if ((/android/gi).test(navigator.userAgent)) { 
    offset = 56; 
    $('html').css('min-height', (window.innerHeight + offset) + 'px'); 
    setTimeout(function(){ window.scrollTo(0, 1); }, 0); 
} 
+0

Эй, спасибо за ваш ответ - Лучше поздно, чем никогда, да ;-) К ​​сожалению, я не нашел действительно подходящего для этого решения. Самое большое предостережение на данный момент - это iOS 7, я думаю, там больше нечего скрывать адресную строку, если я не ошибаюсь, что сделало бы любое решение, размещенное здесь бесполезным. – Sven