当浏览器 window 调整大小时，有什么方法可以使站点转到另一个页面？

Question

我正在使用 HTML5。在我的 Javascript 文件中，我的 Javascript 文件中包含以下代码，用于将移动用户重定向到移动网站。但是，当浏览器 window 调整为 480px 或以下时，是否也可以重定向到移动站点？我到处都找遍了，找不到任何解决办法。

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

}

Answer 1

我会把我的支票放在一个函数中，运行它最初，并将该函数分配给 window.resize 属性:

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

window.onresize 的一个缺点是它是一个属性，所以它不能有多个函数。如果您可能会做其他事情 window 已调整大小，请使用 addEventListener

window.addEventListener('resize', checkWinSize);

Answer 2

需要注意的是screen是桌面用户显示器的大小，所以它可能不会改变。相反，使用 jQuery 来计算浏览器 window 的宽度，而不是 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>

当浏览器 window 调整大小时，有什么方法可以使站点转到另一个页面？

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

html

javascript

browser

resize

window