URL 根据屏幕宽度重定向

Question

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

我不想使用 "refresh"，因为不推荐它，我也不想使用 "User Agent"，因为从长远来看，它对我来说不太可靠，而且我不想关心更新这个。

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

<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 之前。什么都没发生...

Answer 1

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

Answer 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 可用。

Answer 3

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

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

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

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

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

Answer 5

None 这些脚本有效。我都试过了。

Answer 6

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 >

URL 根据屏幕宽度重定向

URL Redirect Based on Screen Width

javascript

url

mobile

redirect