CODEWITHSUNDEEP
jquery
Amresh Raut
Amresh Raut

Reputation: 79

jquery $(window).resize event getting fired in mobile scroll up or down

I am using jquery window.resize function with location.reload method because I want to reload my page when mobile user change from portrait to landscape and its working great in my desktop browser while I change my window size but when I get it in mobile my window.resize event getting fired every time when I scroll up or down in mobile. I dont know why its happening on scroll event when it is supposed to be happened only on portrait and landscape.

Here is my code.

$(document).ready(function () {
function resize() {
    alert("Hello")

resize();
});

$(window).resize(function() {
    location.reload();      
});

So where its going wrong and whats the solution?

Upvotes: 2

Views: 1937

Answers (1)

Brino
Brino

Reputation: 2502

Use the window.onorientationchanged event to detect the change in orientation and avoid this issue. This is a common issue using the onresized event on mobile devices. Any time a menu bar or keyboard is shown by even 1 pixel it will fire this event. If you need to get the orientation also, use window.orientation. Check out this thread: How do I detect when the iPhone goes into landscape mode via JavaScript? Is there an event for this?

window.orientation will return 0 for default, or -90,90,180 for how many degrees clockwise from default it is rotated. Generally, 0 and 180 are portrait, and -90 and 90 are landscape, but this can vary by device. Check out this link for more: http://davidwalsh.name/orientation-change

Example:

$(document).ready(function () {
    $( window ).on( "orientationchange", function( event ) {
        location.reload();  
    });
});

Upvotes: 1

Related Questions