На данный момент я пишу какое-то веб-приложение, и я хочу скрыть адресную строку на устройствах 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();
})();
Но я не очень счастлив с этим решением, поскольку я не являюсь другим UA нюхает.
Есть ли у вас какие-либо предложения, что я мог бы попытаться заставить его работать без UA нюхать? Может ли это быть мой HTML-код, который вызывает проблемы с некоторыми сценариями, которые я опубликовал?
Эй, спасибо за ваш ответ - Лучше поздно, чем никогда, да ;-) К сожалению, я не нашел действительно подходящего для этого решения. Самое большое предостережение на данный момент - это iOS 7, я думаю, там больше нечего скрывать адресную строку, если я не ошибаюсь, что сделало бы любое решение, размещенное здесь бесполезным. – Sven