JavaScript resize event on scroll - mobile

Question

I'm trying to make a website for mobile. I'm having the "resize" event bounded on window, which should rearrange elements when the mobile device is turning (portrait <-> landscape). On iPhone and Samsung Galaxy SII, the event is triggered when I'm scrolling down the page, and that's not good.

How can I fix this?

See https://stackoverflow.com/q/8898412/89818 – caw Jan 09 '18 at 04:07 — caw, Jan 09 '18 at 04:07

sidonaldson · Answer 1 · 2016-07-18T11:39:52.840

53

Cache the width of the viewport and on resize return false if the width is still the same.

A small jQuery snippet:

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

edited Jul 18 '16 at 11:39

answered Jun 19 '14 at 16:48

sidonaldson

24,431
10
56
61

2

This was the answer I was looking for. So nice. OP This should be the accepted answer. This is the correct way to go about it. – Luke Fixt Feb 29 '16 at 00:51
@LukeFlego it is the best way to fix this bug, not ideal code though. Sometimes the easiest fix is the best :) – sidonaldson Feb 29 '16 at 10:12
1

Ran into the same issue, and this fixed it. This is the correct answer. – Mar 01 '16 at 22:31
1

This looks like jQuery and there's nothing about it in the question.. but thank you, sidonaldson, for the answer – not bad at all. – LGT Jul 17 '16 at 11:44
1

@LGT correct. I'll update the answer to make that clear – sidonaldson Jul 18 '16 at 11:38
`window.innerWidth` for all wanting the jQuery free answer. – Arthur Weborg Oct 01 '21 at 16:07

score 9 · Accepted Answer · edited May 23 '17 at 12:32

9

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

Also see this answer.

Here link to a test page.

edited May 23 '17 at 12:32

Community

1
1

answered Feb 20 '12 at 13:35

scessor

15,995
4
43
54

JavaScript resize event on scroll - mobile

2 Answers2

Linked

Related