基于屏幕宽度的 URL 重定向答案

【问题标题】：URL Redirect Based on Screen Width基于屏幕宽度的 URL 重定向
【发布时间】：2015-05-21 18:02:45
【问题描述】：

我正在寻找的非常简单，一种在屏幕或窗口宽度小于 950 像素时自动将用户重定向到不同 URL 的方法。

我不想使用“刷新”，因为它不被推荐，我也不想使用“用户代理”，因为从长远来看它对我来说不太可靠，我不想关注更新这个。

这是我在各处看到的为此目的而建议的脚本，但由于某种原因它没有做任何事情：

<script type="text/javascript">
  <!--
  if (screen.width <= 950) {
    window.location = "https://www.google.com/";
  }
  //-->
</script>

我也尝试了所有这些变体，但没有成功：

window.location
document.location
window.location.href
document.location.href

我也尝试将它放在 Head 标记之后甚至 Doctype 之前的第一件事。什么都没有发生...

【问题讨论】：

你试过了吗 location.href = "your_url"; ?
screen.width 的值是多少？有时候JS会有延迟？还没准备好，..
@dnmh 是的，我确实尝试了 document.location.href... 没有任何反应。

标签： javascript url redirect mobile

【解决方案1】：

我正在回答我自己的问题，因为我最近找到了一个比@Finduilas 提供的更令人满意的解决方案。

此解决方案不仅会在正常情况下重定向您，还会在您调整窗口大小时来回重定向您。

更好！当您从横向切换到纵向时，它会在移动设备中来回重定向您，反之亦然。

<script type="text/javascript">
    $(window).on('load resize',function(){
        if($(window).width() < 950){
            window.location = "https://www.google.com"
        }
    });
</script>

【讨论】：

它不能向后工作，当我把屏幕变小时，它会转到window.location地址。但它不会回到原来的地址
，除非您在其他网站上使用相同的脚本将
当然要在其他网站上使用类似的脚本。
Uncaught ReferenceError: $ is not defined

【解决方案2】：

如果您必须使用 Javascript，请尝试以下操作：

<script type="text/javascript">
   function redirect() {
   if (screen.width <= 950) {
      window.location = "https://www.google.com/";
   }

并在你的身体中添加：

<body onload="setTimeout('redirect()', 300)">

这将在页面加载 300 毫秒后重定向用户，这样您就可以确保屏幕的 width 可用。

【讨论】：

非常感谢，我完全按照您的建议做了，但它也不起作用。

【解决方案3】：

您可以更好地使用 JQUERY...

// Returns width of browser viewport
$( window ).width();

见：http://api.jquery.com/width/

例子：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  if($(window).width() <= 950) {
window.location = "https://www.google.com/";
}
});
</script>
</head>
<body>
<p>Website</p>
</body>
</html>

【讨论】：

如果$(window).width(); 有效，那么我不明白为什么screen.width 无效..
因为必须在 $(document).ready() 之后加载它？有时 JS 比浏览器更快，它返回 0 而不是正确的值..
@Finduilas 这似乎不起作用，但我对 JavaScript 一无所知，也许我没有把它放在正确的地方，你能提供完整的例子，所以我看看如何把它在上下文中？
上面的例子运行良好。你不会仅仅通过缩小我正在做的窗口来重定向。我的错。但是，如果您在缩小窗口后刷新浏览器，您会看到您确实被重定向了。非常感谢。

【解决方案4】：

<script type="text/javascript">
  <!--
  if (screen.width <= 950) {
    window.location = "https://www.google.com/";
  }
  //-->
</script>

<!-- you forgot to add window.location.replace("https://www.google.com/"); and yours is a little wrong-->
<script type="text/javascript">
  <!--
  if (screen.width <= 950) {
    window.location.replace("https://www.google.com/");
  }
  //-->
</script>

【讨论】：

【解决方案5】：

这些脚本都不起作用。我都试过了。

【讨论】：

\欢迎来到 StackOverflow 并感谢您的贡献！这个答案作为评论可能会更好，因为它不能解决问题。