Могу ли я запросить высоту окна мобильного Safari без URL-панели платформо-независимым способом?

Question

Я пишу небольшой виджет для чтения текста с боковой прокруткой, похожий на тот, который вы получаете в магазине приложений iPhone, где панель скриншотов для приложения - это другая, горизонтально прокручиваемая панель, встроенная в основную вертикально прокручиваемую панель.

Во всех версиях (включая компьютерный стиль клавиатуры / мыши в полном разрешении) панель занимает 100% ширины контейнера, поэтому она выглядит как горизонтальная полоса на странице.

Inверсия с сенсорным интерфейсом для малого разрешения, то есть для смартфонов, я хочу, чтобы она также меняла размеры до полной высоты окна, чтобы при вертикальной прокрутке она могла занимать весь экран.

IPhone делает это сложно, потому что $ (window) .height () или как вы хотите сделать запрос, кажется, зависит от того, видима ли строка URL.

Без специального кода кода, чтобы узнать,это на iPhone, или добавление хаков, чтобы прокрутить окно, чтобы отключить строку URL, а затем запросить высоту, есть ли способ спросить Safariна мобильном телефоне, «какова высота окна», которая даст на моем 3GS ответ 416 независимо от того, видна ли в данный момент панель URL или нет?

Я хочу найти нейтральный для платформы способ запроса,для всех основных смартфонов: «Какую высоту я могу установить для этой панели, чтобы при ее прокрутке она заполняла все окно браузера?»

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

Answer 1

Я тоже искал решение этой проблемы. Нет успеха Я закончил со взломом, как вы на самом деле хотели избежать. Но так как другого решения, похоже, не существует, я решил оставить здесь детали:

В моем случае на странице нет ничего, кроме слоя с одним изображением, который должен быть настолько большим, насколько позволяет область просмотра, сохраняя исходное соотношение сторон. Итак, у меня есть функция, которую я вызываю при загрузке и изменении ориентации, и она выглядит так:

function updateImgLayer() {
    $('#imgLayer img').hide(); // to prevent flickering
    $('#imgLayer').height("5000px"); // to be sure it's bigger then the viewport    

    // timeout of zero ms makes sure layer-resize is finished in mobile-safari
    // the android-browser seems to need more time – set it to 300 ms there.
    setTimeout(function() {
        window.scrollTo(0, 1); // scroll the url-bar out

        $('#imgLayer').height(window.innerHeight + "px");

        var imgH = $('#imgLayer .height').text(); // wrote img-dimensions in there by php

        // the rest is to scale the image
        var imgW = $('#imgLayer .width').text();
        var winH = window.innerHeight;
        var winW = $(window).width();

        if((imgH/imgW) > (winH/winW)) {
            $('#imgLayer img').css({ top: "0px", width: "auto", height: $('#imgLayer').height() + "px" });
        } else {
            $('#imgLayer img').width($('#imgLayer').width() + "px");
            var cImgH = ($('#imgLayer').width()/imgW) * imgH;
            var top = $('#imgLayer').height()/2 - cImgH/2;
            $('#imgLayer img').css({ top: top+"px", height: "auto"  });
        }

        $('#imgLayer img').fadeIn(200);

}, (android?300:0) );

}