基于屏幕宽度的 URL 重定向
[英]URL Redirect Based on Screen Width
问题描述
What I'm looking for is quite simply, a way to automatically redirect the user to a different URL when the screen or window width is less then 950px.
我正在寻找的很简单，一种在屏幕或窗口宽度小于 950 像素时自动将用户重定向到不同 URL 的方法。
I don't want to use "refresh" as it's not recommended, and I don't do want to use "User Agent" either as it seams to me less reliable in the long term and I don't want to be concerned with updating this.我不想使用“刷新”，因为它不被推荐，我也不想使用“用户代理”，因为从长远来看，它对我来说不太可靠，我不想担心更新这个。
This is the Script I see suggested everywhere for this purpose but for some reason it doesn't do anything:这是我在各处看到的为此目的而建议的脚本，但由于某种原因它没有做任何事情：
<script type="text/javascript">
<!--
if (screen.width <= 950) {
window.location = "https://www.google.com/";
}
//-->
</script>
I've also tried it with all this variants with no success:我也尝试过所有这些变体，但没有成功：
window.location
document.location
window.location.href
document.location.href
I've also tried placing it as the first thing after Head tag and even before Doctype.我还尝试将它作为 Head 标签之后甚至 Doctype 之前的第一件事。 Nothing happens...没发生什么事...
6 个解决方案
解决方案1
3 2015-03-18 19:33:53
If you have to use Javascript, try the following: 如果您必须使用Javascript，请尝试以下操作：
<script type="text/javascript">
function redirect() {
if (screen.width <= 950) {
window.location = "https://www.google.com/";
}
and in your body add : 并在你的身体添加：
<body onload="setTimeout('redirect()', 300)">
This will redirect the user after 300 ms when the page is loaded, this way you are making sure that the width of the screen is available. 这将在页面加载后300 ms后重定向用户，这样您就可以确保屏幕width可用。
解决方案2
2 2015-03-18 19:23:25
You can better use JQUERY for this... 你可以更好地使用JQUERY ......
// Returns width of browser viewport
$( window ).width();
See: http://api.jquery.com/width/ 请参阅： http ： //api.jquery.com/width/
Example: 例：
<!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>
解决方案3
2 已采纳 2015-07-28 15:17:47
I'm answering my own question as I have recently found a more satisfying solution then the one provided by @Finduilas. 我正在回答我自己的问题，因为我最近找到了一个比@Finduilas提供的更令人满意的解决方案。
This solution not only redirects you in normal circumstances, it will also redirect you back and forth as you resize your window. 此解决方案不仅可以在正常情况下重定向您，还可以在调整窗口大小时来回重定向。
Even better! 更好！ It will redirect you back and forth in mobile devices as you switch from landscape to portrait and vice-versa. 当您从横向切换到纵向时，它会在移动设备中来回重定向，反之亦然。
<script type="text/javascript">
$(window).on('load resize',function(){
if($(window).width() < 950){
window.location = "https://www.google.com"
}
});
</script>
解决方案4
0 2017-12-20 00:13:59
<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
0 2022-01-12 10:54:06
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 >
解决方案6
-1 2018-09-21 21:41:21
None of these scripts work. 这些脚本都不起作用。 I have tried them all. 我试过了所有这些。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.