Iphone/iPad Triggering Unexpected Resize Events

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

    });

});

JavaScript resize event on scroll - mobile

Use the onOrientationChange event and the window.orientation property instead.

Also see this answer.

Here link to a test page.

$(window).resize() in safari : why it works also if scroll window (but doesn't resize)?

This is a known bug that happened from iOS6 Safari. The resize event fires randomly while scrolling. Fortunately it's not a jQuery issue.

This answer to a similar problem might solve your issue as well.

For the lazy:

3Stripe posted that you should "Store the window width and check that it has actually changed before proceeding with your $(window).resize function"

His code snippet:

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

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

    /* Resize Event */
    $(window).resize(function(){
        // Check if the 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

    });

});

$(window).resize() executes when scrolling on mobile devices

The problem with mobile devices is that they have the browser toolbars that are hidden when you scroll and this leads to screen change (activates the resize event) and this means that you have to make some validations to your code and detect why was the resize event fired.

One way I have used is by saving the window width and checking if the correct window width is the same or changed. If it changes then it means that the append should happen (in your case).

var dwidth = $(window).width();

$(window).resize(function(){
    var wwidth = $(window).width();
    if(dwidth!==wwidth){
         dwidth = $(window).width();
         console.log('Width changed');
    }
});

How to stop double-touching in iOS from scaling the entire page

I found out the solution.

I had the following DOM structure:

<body>
    <div id="div1">
        <div id="div2">
            <div id="div3">
                <canvas>...</canvas>
            </div>
        </div>
        <div id="div4">
            <div id="div5"><button></div>
        </div>
    </div>
</body>

I initially tried to add event.preventDefault() in onTouchStartDiv3(), which listens to events in the canvas element (the closest upstream element with event listener is div3).

This solved the problem of double-touch in the border but caused another problem:

onTouchMoveDiv3() was called immediately (without even moving the finger), which caused other side-effects. (I have some state machine in the level, that depends on the onTouchStartDiv3(), onTouchMoveDiv3(), onTouchEndDiv3()).

I then tried to add event listeners at the window/document levels (onTouchStartWindow(), onTouchStartDocument()) and call event.preventDefault() in them.

This again solved the problem of double-touch in the border but caused another problem:

The button (div5), stopped responding to touch events.

The reason was that, because there is no specific event listener on the button, the event was intercepted higher up, and default behaviour was applied.

Because the window/document event listener called event.preventDefault(), this behaviour was prevented (which stopped the button from responding to touch events).

Finally, I added event listener at the touched border level (div2).

Inside onTouchStartDiv2() I compare event.currentTarget (div2), to event.target where the event originated.

If the event.target is div2 then the event originated from clicking on the border, so I apply event.preventDefault() to prevent the side-effect of resizing the entire image on iOS.

If the event.target is not div2 then the event originated from clicking, e.g. in the canvas, so I do not apply event.preventDefault() to maintain the state machine.

With this logic, I solved the problem:

when touching the canvas element (div3 is the closest upstream element with event listener), the regular behaviour was applied.
when touching the border element (div2), event.preventDefault() was applied to the event listener, and prevent the default behaviour of resizing the entire window (which I wanted to disable).
when touching the button element (div5), the regular behaviour was applied so the button responded to touch events.

mobile chrome fires resize event on scroll

Just for curiosity, I was trying to reproduce it and if I'm correct this is caused by the navigation chrome bar.

When you scroll down and chrome hides the browser navigation bar it produces a window resize, but this is correct, because after that we have a bigger window size due to the free space that the browser nav bar has left.

Related article: https://developers.google.com/web/updates/2016/12/url-bar-resizing

Consider CWitty answer to avoid this behavior.

Jquery window.resize(event) = {} works for inspect element but not when the chrome (or edge) window is resized

The problem is not with the resize event or with browser. It's occurring because you're using window.screen.width, which is relative to the screen, not to the browser window. It doesn't matter if you resize the browser window, the screen width will not change. For example, if your screen has resolution of 1900x1200, screen.width will always be 1900. Hence, you should use window.innerWidth, or just innerWidth to get the viewport width. To know more, see this question.

Your code would be that way:

(window).resize((event) => {

  if (innerWidth <= 540) {

    $('.className1').addClass('d-none');
    $('.classname2').css("width", "100%");
    $('.classname3').css("left", "3%");
    $('.classname3').css("width", "100%");
    $('.classname4').css("width", "90%");

An example of working code (open the snippet in full page and resize it):

  $(window).resize((event) => {
      if (innerWidth <= 540) {
          document.write('It\'s working.');
      }
  });

<html>
    <body>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    </body>
</html>

What/which event(s) fires off when the screen-size changes?

Whenever you change the browser with onresize event is fired and you can listen to it as follows

Using JavaScript

window.addEventListener("resize", function(event) {

  let width = document.body.clientWidth;

  let height = document.body.clientHeight;

  console.log(width, height);

})

Iphone/iPad Triggering Unexpected Resize Events