基于屏幕宽度的URL重定向

URL Redirect Based on Screen Width

本文关键字：URL 重定向 于屏幕 屏幕      更新时间：2023-09-26

我想要的很简单，一种在屏幕或窗口宽度小于950px时自动将用户重定向到不同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之前。什么都没发生。。。

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

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

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

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

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

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

在你的身体里添加：

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

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

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

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

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 >
相关文章：