Iphone/ipad запускает непредвиденные изменения размера

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

Чтобы справиться со всем этим, я пытался использовать событие window.resize. Это позволяет магии происходить на настольных браузерах, пока они изменяются, но я получаю изменения размера на iPad/iPhone, когда я их не ожидаю.

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

Вот простой пример:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title>Resize test</title>
<style>
.box {height: 10000px; background: green; display: none;}
</style>
<script>
$(function(){
    $(".opener").click(function(){
        $(".box").slideToggle();
    });
    $(window).resize(function(){
        alert("resized");
    });
});
</script>
</head>

<body>
<a href="#" class="opener">Open/close me</a>
<div class="box"></div>
</body>
</html>

Когда вы нажимаете ссылку в обозревателе рабочего стола, нет предупреждения. Нажмите ссылку на iPhone/iPad, вы получите предупреждение. Какая сделка?

Ответы

Ответ 1

Сохраните ширину окна и убедитесь, что он действительно изменился, прежде чем приступить к вашей функции $(window).resize:

jQuery(document).ready(function($) {

    // Store the window width
    var windowWidth = $(window).width();

    // Resize Event
    $(window).resize(function(){

        // Check window width has actually changed and it not just iOS triggering a resize event on scroll
        if ($(window).width() != windowWidth) {

            // Update the window width for next time
            windowWidth = $(window).width();

            // Do stuff here

        }

        // Otherwise do nothing

    });

});

Ответ 2

Мне нужно было указать ширину:

   <meta name="viewport" content="width=1000, initial-scale=1.0, user-scalable=yes">

Стили:

html, body
{
       height:100%;
       width:100%;
       overflow:auto;
}

Ответ 3

Является ли предположение неправильным, что вы хотите только иметь эффект события изменения размера на устройстве без касания? Если это так, вы можете просто использовать Modernizr и сделать чек вроде:

    $(window).resize(function(e){
       if(Modernizr.touch) {
         e.preventDefault();
       }
    });

Ответ 4

Убедитесь, что вы явно прокручиваете оболочку тела html, чтобы скрыть адресную строку при загрузке страницы.

Ответ 5

@3stripe имеет правильный ответ.

Это небольшая модификация, которая делает ее более эффективной, кэшируя оконный объект, а не повторно создавая экземпляр jQuery (помните, что событие resize может быть вызвано быстро при фактическом изменении размера).

jQuery(document).ready(function($) {

    // Cached window jQuery object
    var $window = $(window);

    // Store the window width
    var windowWidth = $window.width();

    // Resize Event
    $window.resize(function(){

        // Check window width has actually changed and it not just iOS triggering a resize event on scroll
        if ($window.width() != windowWidth) {

            // Update the window width for next time
            windowWidth = $window.width();

            // Do stuff here

        }

        // Otherwise do nothing

    });

});

Ответ 6

я узнал ответ в stackoverflow it self ссылку на решение. это ответ sidonaldson, который помог мне решить проблему, возникшую раньше. ти

ответ:

var cachedWidth = $(window).width();
    $(window).resize(function(){
        var newWidth = $(window).width();
        if(newWidth !== cachedWidth){
            //DO RESIZE HERE
            cachedWidth = newWidth;
        }
    });

Ответ 7

Кажется, он взломан, чтобы проверить размер окна, чтобы узнать, изменилось ли оно. Вместо этого используйте ресурсы, которые предоставляет jQuery!

В обработчике событий вы можете проверить поле jQuery event target, которое всегда устанавливается в элемент DOM, который инициировал событие. Если пользователь изменяет размер окна, target будет окном. Если пользователь изменяет размер #someDiv, target будет #someDiv.

$(window).on('resize', function(event) {
    if ($(event.target).is($(window))) {
       doTheThing();
    }
});