Mobile Safari $(окно).height() несоответствие в строке URL

Question

Mobile Safari $(окно).height() несоответствие в строке URL

Я пытаюсь установить фиксированный div, который составляет 100% высоты окна. Но мобильное сафари не определяет правильную высоту окна. Он всегда думает, что строка 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'});
    });
});

13

jquery mobile safari height

Источник

user580030 17 янв '13 в 21:20

5 ответов

Другие вопросы по тегам jquery mobile safari height

user508355 27 июл '15 в 14:14 2015-07-27 14:14 · Answer 1 · 2015-07-27 14:14

Tldr

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

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

JQuery-х $(window).height() это обертка для document.documentElement.clientHeight, Это дает вам высоту области просмотра, исключая пространство, покрытое полосами прокрутки браузера. Как правило, он работает нормально и пользуется почти универсальной поддержкой браузера. Но есть и причуды на мобильных устройствах, и в частности на 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

Уловка здесь заключается в том, как определить размер (ширину) полос прокрутки для данного браузера. Вам нужно запустить тест для этого. Это не особенно сложно - взгляните на мою реализацию здесь или оригинальную версию Ben Alman, если хотите.

Если вы не хотите бросать свой собственный, вы также можете использовать мой компонент - jQuery.documentSize - и покончить с $.windowHeight() звоните.

user270836 24 мар '14 в 20:36 2014-03-24 20:36 · Answer 2 · 2014-03-24 20:36

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

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

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

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

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

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

user580030 19 янв '13 в 00:16 2013-01-19 00:16 · Answer 3 · 2013-01-19 00:16

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

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

Шаг 2 - Если это так, проверьте, является ли браузер Safari

// 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 всякий раз, когда необходимо выполнить код, специфичный для мобильного сафари.

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

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

user4245865 10 июл '22 в 12:22 2022-07-10 12:22 · Answer 4 · 2022-07-10 12:22

Для этого есть совершенно новый изящный CSS-способ:dvhединица видового экрана.

Вместоheight: 100%(или100vh), использоватьheight: 100dvh, что означает «динамическая высота области просмотра». Вот хорошее объяснение того, как работают новые единицы измерения области просмотра: https://www.youtube.com/watch?v=Xy9ZXRRgpLk&amp;t=977s.

user1058134 17 янв '13 в 21:57 2013-01-17 21:57 · Answer 5 · 2013-01-17 21:57

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