iphone/ipad triggering unexpected resize events

Question

I\'m working on a mobile version of my site. I\'m using media queries and CSS as much as possible, but I\'m also using some javascript to, for example, turn my navigation in

Answer 1

I found out the answer in StackOverflow itself link of the solution. it's the answer by sidonaldson that helped me solve an issue faced earlier like this. ty

the answer is:

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

Answer 2

It feels hacky to check the window size to see if it's changed. Instead, use the resources jQuery provides you!

In the event handler, you can check the jQuery event's target field, which is always set to the DOM element that originated the event. If the user resizes the window, target will be the window. If the user resizes #someDiv, target will be the #someDiv.

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

Answer 3

I needed to specify a width:

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

Styles:

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

Answer 4

@3stripe has the correct answer.

This is just a slight modification which makes it more efficient by caching the window object rather than repeatedly instantiating jQuery (keep in mind the resize event may be called rapidly on an actual 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

    });

});

Answer 5

Store the window width and check that it has actually changed before proceeding with your $(window).resize function:

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

    });

});

Answer 6

Here's the vanilla javascript version of the accepted answer

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
    })

})