Mobile Safari $(window).height() Разница URL-адресов

Я пытаюсь установить фиксированный div, на 100% превышающий высоту окна. Но мобильное сафари не определяет правильную высоту окна. Он всегда считает, что строка URL является частью уравнения.

Это то, что я использую в настоящее время, но оно не учитывает строку URL.

$(function(){
    $(document).ready(function(){ // On load
        alert($.browser);   
        $('#right-sidebar').css({'height':(($(window).height()))+'px'});
    });
    $(window).resize(function(){ // On resize
        $('#right-sidebar').css({'height':(($(window).height()))+'px'});
    });
});

Ответ 1

Это связано с ошибкой в методе jQuery.height().

Чтобы получить правильную высоту, вы можете использовать:

$('#right-sidebar').height(window.innerHeight);

Чтобы убедиться, что вы в основном совместимы с браузером, вы можете сделать это:

var height = window.innerHeight ? window.innerHeight : $(window).height();
$('#right-sidebar').height(height);

Я говорю в основном, поскольку это начнет вести себя смешно, если есть нижняя полоса прокрутки.

Ответ 2

TL;DR

Если вы просто хотите запросить высоту окна, кросс-браузер и сделать это, используйте jQuery.documentSize и вызовите $.windowHeight(). Для реализации вашего собственного решения читайте дальше.

Когда использовать jQuery или clientHeight документа

jQuery $(window).height() является оберткой для document.documentElement.clientHeight. Он дает вам высоту окна просмотра, исключая пространство, покрываемое полосами прокрутки браузера. Как правило, он отлично работает и пользуется почти универсальной поддержкой браузера. Но есть quirks на мобильных устройствах и в iOS в частности.

В iOS возвращаемое значение делает вид, что полосы URL и вкладок видны, даже если они не являются. Они скрываются, как только пользователь прокручивается, а браузер переключается на минимальный пользовательский интерфейс. Высота окна увеличивается примерно на 60 пикселей в процессе и не отражается в clientHeight (или в jQuery).
clientHeight возвращает размер макет видового экрана, а не визуальный видовой экран, и поэтому не отражает состояние масштабирования,

Так что... на мобильном телефоне не так хорошо.

Когда использовать window.innerHeight

Существует еще одно свойство, которое вы можете запросить: window.innerHeight. Это

возвращает высоту окна,
основан на визуальном окне просмотра, то есть отражает состояние масштабирования,
обновляется, когда браузер вводит минимальный пользовательский интерфейс (мобильное Safari),
, но включает область, покрытую полосами прокрутки.

Последняя точка означает, что вы не можете просто оставить ее в качестве замены. Кроме того, он не поддерживается в IE8 и не работает в Firefox до FF25 (октябрь 2013 г.).

Но он может использоваться как замена на мобильном телефоне, поскольку в мобильных браузерах присутствуют полосы прокрутки в качестве временного наложения, которые не занимают места в окне просмотра - window.innerHeight и d.dE.clientHeight возвращают одинаковое значение в этом отношении.

Кросс-браузерное решение

Итак, кросс-браузерное решение для определения высоты реального окна работает как это (псевдо-код):

IF the size of browser scroll bars is 0 (overlay)
  RETURN window.innerHeight
ELSE
  RETURN document.documentElement.clientHeight

Здесь вы узнаете, как определить размер (ширину) полос прокрутки для данного браузера. Вам нужно запустить тест для него. Это не особенно сложно - посмотрите мою реализацию здесь или оригинал Бен Альман, если хотите.

Если вы не хотите откатывать свои собственные, вы также можете использовать компонент моего - jQuery.documentSize - и делать это с помощью a $.windowHeight() вызов.

Ответ 3

Вот как я это понял. Его двухэтапный процесс.

Шаг 1 - Проверьте, не является ли устройство iPhone или iPod.

Шаг 2 - Если он затем проверяет, является ли браузер сафари

// On document ready set the div height to window
$(document).ready(function(){ 

    // Assign a variable for the application being used
    var nVer = navigator.appVersion;
    // Assign a variable for the device being used
    var nAgt = navigator.userAgent;
    var nameOffset,verOffset,ix;


    // First check to see if the platform is an iPhone or iPod
    if(navigator.platform == 'iPhone' || navigator.platform == 'iPod'){
        // In Safari, the true version is after "Safari" 
        if ((verOffset=nAgt.indexOf('Safari'))!=-1) {
          // Set a variable to use later
          var mobileSafari = 'Safari';
        }
    }

    // If is mobile Safari set window height +60
    if (mobileSafari == 'Safari') { 
        // Height + 60px
        $('#right-sidebar').css('height',(($(window).height()) + 60)+'px');
    } else {
        // Else use the default window height
        $('#right-sidebar, .profile').css({'height':(($(window).height()))+'px'});  
    };


});

// On window resize run through the sizing again
$(window).resize(function(){
    // If is mobile Safari set window height +60
    if (mobileSafari == 'Safari') { 
        // Height + 60px
        $('#right-sidebar').css('height',(($(window).height()) + 60)+'px');
    } else {
        // Else use the default window height
        $('#right-sidebar, .profile').css({'height':(($(window).height()))+'px'});  
    };
});

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

Начиная с устройства, сначала исключаются iPads и настольные компьютеры и т.д., которые также могут запускать Safari. Затем второй шаг исключает Chrome и другие браузеры, которые могут потенциально запускаться на этих устройствах.

Здесь более подробно описывается, почему я сделал это таким образом - http://www.ethanhackett.com/?blog=window-height-100-on-mobile-safari-coding-solution

Ответ 4

Если мобильное сафари является единственным браузером, предоставляющим вам эту проблему, вы всегда можете настроить таргетинг на этот браузер и за вычетом высоты строки URL-адреса от вашей общей высоты. Вы можете найти высоту строки URL по следам и ошибкам, я не знаю, насколько высок это