iphone/ipad triggering unexpected resize events

javascript jquery iphone css mobile

45,139

Solution 1

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

    });

});

Solution 2

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

})

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

Solution 4

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

Solution 5

Is the assumption wrong, that you only want to have the effect of the resize event on a non-touch device? If so you could just use Modernizr and do a check like:

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

View more solutions

45,139

Author by

rdoyle720

Updated on July 10, 2022

Comments

rdoyle720 almost 2 years
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 into a collapse/expand list on smaller devices to save room.

To handle all of this, I was attempting to use the window.resize event. This allows the magic to happen on desktop browsers while they're resized, but I'm getting resize events on iPad/iPhone when I'm not expecting them.

On desktop browsers, I only get a resize event if I actually resize the window. On mobile browsers I get the resize event when I change orientation (expected), but I also get it when I toggle to expand/collapse something.

Here's a simple example:
```
<!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>
```
When you click the link on a desktop browser, no alert. Click the link on iPhone/iPad, you get the alert. What's the deal?
rdoyle720 over 12 years

Thanks, but then I lose the responsive part of the design, having it adapt to different resolutions...
Kees C. Bakker over 12 years

Good point. Do you even get the events if body and html are: height:100%; with:100%; overflow:auto ?
rdoyle720 over 12 years

That did it, adding: html, body {height: 100%; overflow: auto; margin: 0} Stopped the resize events.
rdoyle720 over 12 years

Actually no, that didn't quite fix it. overflow: auto makes me lose the momentum scrolling. If I add -webkit-overflow-scrolling: touch I get it back, but lose the linen texture underneath on the bounce. Maybe that's as good as I can get it.
Kees C. Bakker over 12 years

So basically the events are height-sizing-events that are getting in. Maybe iScroll 4 could fix the scolling issue? cubiq.org/iscroll-4
alimac83 over 11 years

Just to add to this.. I had the same problem and it seemed by changing the overflow on the html & body, the resize event stopped firing - problem solved! Thanks richard
am80l over 9 years

THANK YOU. just spent way too long on this issue myself. Great simple solution!
Marcos Pérez Gude over 8 years

I like that solution. F*ck to iOS that make scroll fires resize event. Incomprehensible.
Marcos Pérez Gude over 8 years

This solution saves my life today again. I don't understand why this answer is not marked as the valid answer, but this answer is meritory to have almost 1000 upvotes (there are little stupid things that have much more upvotes).
Alex almost 8 years

Unfortunately, Modernizr can no longer detect touch and nor should it. stucox.com/blog/you-cant-detect-a-touchscreen
Ralphonz over 7 years

Yep, this is better but shouldn't it be "var $window = $(window);" (you're missing the var declaration)
Anthony Manning-Franklin over 7 years

@MarcosPérezGude it makes sense because it literally is resizing the viewport - your content is shifted and re-rendering takes place due to the changing controls and url bar resizing. There are times where this might be a feature, not a bug.
Rahul over 7 years

Almost spend 3 hours(on my own to figure the issues and failed) and then I found this golden answer. Cheers @3stripe
SamSig over 7 years

2017, scrolling still considered resize event.
qdev over 6 years

Have you checked your answer before ? On the iOS scroll it get fired window.resize event (with the target window) thus you cannot say if it was or not indeed resized, leaving us with the only solution to check it against a stored value (but you can optimise a little bit and do this only for iOS - check navigator agent as well)
vinni about 6 years

THANK YOU! This just helped me so much
hurricane over 5 years

2019, scrolling still fires resize event.
Sevron over 4 years

2020, scrolling and PINCH ZOOMING still fires resize event.
Giorgio Tempesta almost 4 years

If someone wants to detect also changes in height (not very common but could happen), I would suggest to make the same check on $(window).height()
00-BBB over 3 years

scroll == resize 🤯🤯🤯
Pedro Magalhães over 2 years

thats a very good idea
Mg Gm almost 2 years

The problem is a bit more complex.... the resize events reacts to 2 types of parameters changing , the width (which obviously never changes) and the height changing, if any of those change , it gets triggered.. What happens is that safari ios starts changing the height on scrolling ... to show or hide the url bar... so it triggers the resize on scroll. There is no a specif event listener for the width changing.