javascript 基于屏幕宽度的 URL 重定向
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29130776/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
URL Redirect Based on Screen Width
提问by David Martins
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. Nothing happens...
我还尝试将它作为 Head 标签之后甚至 Doctype 之前的第一件事。没发生什么事...
回答by David Martins
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>
回答by callback
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 widthof the screen is available.
这将在页面加载 300 毫秒后重定向用户，这样您就可以确保width屏幕可用。
回答by Finduilas
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>
回答by Kizito Njoku
<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>
回答by JayD
None of these scripts work. I have tried them all.
这些脚本都不起作用。我都试过了。
