iphone / ipad вызывает неожиданные события изменения размера - PullRequest
Новая
       1

iphone / ipad вызывает неожиданные события изменения размера

49 голосов
/ 17 января 2012

Я работаю над мобильной версией моего сайта. Я использую как можно больше медиа-запросов и 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, вы получите предупреждение. В чем дело?

Ответы [ 8 ]

110 голосов
/ 13 июня 2014

Сохраните ширину окна и убедитесь, что оно действительно изменилось, прежде чем приступить к работе с $(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's 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

    });

});
3 голосов
/ 30 июля 2018

Вот версия принятого ответа ванильного javascript 

document.addEventListener('DOMContentLoaded', function() {

    // Store the window width
    var windowWidth = window.innerWidth

    // Resize Event
    window.addEventListener("resize", function() {

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

            // Update the window width for next time
            windowWidth = window.innerWidth

            // Do stuff here

        }

        // Otherwise do nothing
    })

})
2 голосов
/ 17 января 2012

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

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

Стили: 

html, body
{
       height:100%;
       width:100%;
       overflow:auto;
}
1 голос
/ 08 марта 2017

Я нашел ответ в самом StackOverflow ссылка решения .это ответ sidonaldson, который помог мне решить проблему, с которой мы столкнулись ранее, вот так.ты

ответ: 

var cachedWidth = $(window).width();
    $(window).resize(function(){
        var newWidth = $(window).width();
        if(newWidth !== cachedWidth){
            //DO RESIZE HERE
            cachedWidth = newWidth;
        }
    });
1 голос
/ 04 февраля 2012

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

    $(window).resize(function(e){
       if(Modernizr.touch) {
         e.preventDefault();
       }
    });
0 голосов
/ 25 апреля 2017

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

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

$(window).on('resize', function(event) {
    if ($(event.target).is($(window))) {
       doTheThing();
    }
});
0 голосов
/ 10 июля 2016

@ 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's 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

    });

});
0 голосов
/ 27 января 2012

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...