Is there any way to make the site go to another page when the browser window is resized?

Question

I'm using HTML5. In my Javascript file, I have the following code in my Javascript file to redirect mobiles users to the mobile site. However, is there a way to redirect to the mobile site as well when the browser window is resized to 480px or below? I looked everywhere and couldn't find any solutions anywhere.

if( screen.width <= 480 ||  /webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)  )  {     
window.location = "mobile.html";

}

You're looking for the [`resize` event](https://developer.mozilla.org/en-US/docs/Web/Events/resize). — Jordan Running, Jan 28 '17 at 19:21
This will be useful: http://stackoverflow.com/a/641874/4110233 — TheChetan, Jan 28 '17 at 19:28

Adam Azad · Answer 1 · 2017-01-28T19:53:58.853

I would put my check in a function, run it initially, and assign the function to window.resize property:

function checkWinSize(){

    if( window.innerWidth <= 480 ||  /webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)  )  {     
        window.location = "mobile.html";
    }

}

checkWinSize(); // intial check
window.onresize = checkWinSize; // check when window is resized

A drawback with window.onresize is that it's a property so it cannot have multiple functions. In case you might do other things window is resized, use addEventListener

window.addEventListener('resize', checkWinSize);

should be checking window width, not screen – charlietfl Jan 28 '17 at 19:53 — charlietfl, Jan 28 '17 at 19:53

AHAY · Accepted Answer · 2017-01-28T19:41:35.593

0

One thing to note is that screen is the size of a desktop user's monitor, so it may not change. Instead, use jQuery to figure out the width of the browser's window, not the screen:

<script src=https://code.jquery.com/jquery-1.12.4.js></script>

<script type="text/javascript">

  window.onresize = function(event) {
    if ($(window).width() <= 480) {
        console.log('do stuff');
    }
  }
</script>

edited Jan 28 '17 at 19:41

answered Jan 28 '17 at 19:36

AHAY

156
1
5

Thank you so much! I used this code, and it worked perfectly! – Megan Jan 29 '17 at 07:06

Is there any way to make the site go to another page when the browser window is resized?

2 Answers2