iphone/ipad triggering unexpected resize events iphone/ipad triggering unexpected resize events javascript javascript

iphone/ipad triggering unexpected resize events


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


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


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