基于屏幕宽度的URL重定向

Question

基于屏幕宽度的URL重定向

7

我需要的是一种简单的方法，当屏幕或窗口宽度小于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之前。但仍然没有任何变化...

- David Martins

你尝试过使用 location.href = "your_url"; 吗？ - dnmh

屏幕宽度的值是多少？JavaScript有时会出现延迟吗？还没有准备好... - Finduilas

@dnmh 是的，我尝试了document.location.href... 但什么也没发生。 - David Martins

6个回答

5

如果必须使用JavaScript，请尝试以下方法：

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

在您的HTML文件中，请在标签内添加以下内容：

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

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

- callback

非常感谢，我按照您的建议做了，但还是不起作用。 - David Martins

2

您可以更好地使用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>

- Finduilas

如果 $(window).width(); 能够正常工作，那么我不明白为什么 screen.width 不能正常工作。 - callback

1

因为你必须在 $(document).ready() 之后加载它？有时候 JS 比浏览器更快，它会返回 0 而不是正确的值。 - Finduilas

@Finduilas，那似乎不起作用，但我对JavaScript一无所知，也许我没有把它放在正确的位置，你能提供完整的示例，以便我看到如何将其放入上下文中吗？ - David Martins

上面的示例运行良好。你不会因为缩小窗口而被重定向，这正是我所做的。我的错误。然而，如果你在缩小窗口后刷新浏览器，你会发现你确实被重定向了。非常感谢。 - David Martins

Screen.width是设备的屏幕尺寸，是固定的。Window.outerWidth是浏览器窗口的宽度，可以移动。总的来说，我发现Window.width更有帮助。 - undefined

0

<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>

- Kizito Njoku

0

USE THIS ON TOP OF THE HEAD TAG
<script >
  window.addEventListener('resize', function() {
    if (window.innerWidth <= "Your desired screen width") {
        window.location.href = "redirect loacation"; 
    }
});
</script>
</head>
<body >

- Fome

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Fredrik A.

请避免仅提供代码的答案。 - code

0

这些脚本都不起作用，我已经尝试过了。

- JayD

1

欢迎来到StackOverflow并感谢您的贡献！这个答案可能更适合作为评论，因为它没有解决问题。 - ehacinom

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Martins · Accepted Answer

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

这个解决方案不仅可以在正常情况下重定向你，而且当你调整窗口大小时也会来回地重定向你。

更好的是！当你从横屏切换到竖屏和反之时，它将在移动设备上来回地重定向你。

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