jQuery ориентация с $ (window) .resize ooops

Question

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

я написал, внутри готовой функции(), следующий код:

$(window).resize(function(){ 

    var height = $(window).height(); 
    var width = $(window).width(); 

    if(width>height) { 
     // Landscape 
     $("#landscape").css('display','none'); 
    } 
    else { 
     // Portrait 
     $("#landscape").css('display','block'); 
     $("#landscape").click(function(){ 
      $(this).hide(); 
     }); 
    } 

, но при загрузке страницы (или я обновить его) он всегда показывает сообщение (как это следует только в портретном Режим). Если я изменил размер браузера, код начнет работать и отобразит/скрывает сообщение соответствующим образом. Как я могу это исправить?

Спасибо!

Answer 1

.resize() вызова после $(window).resize():

$(window).resize(function(){ 

    var height = $(window).height(); 
    var width = $(window).width(); 

    if(width>height) { 
    // Landscape 
    $("#landscape").css('display','none'); 
    } else { 
    // Portrait 
    $("#landscape").css('display','block'); 
    $("#landscape").click(function(){ 
     $(this).hide(); 
    }); 
    } 
}).resize(); // <----this way 

Answer 2

Запуск функции, когда DOM готов.

$(function() { 
    $(window).resize(); 
}); 

Answer 3

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

Кроме того, при использовании $ (окно) .resize, убедитесь, что вы установите задержку для предотвращения нескольких одновременных вхождений, это было покрыто много раз:

JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?

jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?

Не убедитесь, что ваш объем проекта, но обработка проекта исключительно на основе ориентации обычно считается плохой практикой; особенно в вашей функции ландшафта (ширина> высота). Что, если ширина страницы составляет 1280 и 500? Если вы также не используете обнаружение устройств, ваша логика не всегда будет выполняться.