简体   繁体   English

使用jQuery根据屏幕分辨率重定向?

[英]Redirect based on screen resolution with jQuery?

Is it possible, using JQuery, to redirect to a different index.html based upon the users screen resolution?是否可以使用 JQuery 根据用户屏幕分辨率重定向到不同的 index.html? So for example, screens upto the size 1024px wide go to 1024.html, and all others go to the normal index.html?例如,1024px 宽的屏幕转到 1024.html,所有其他屏幕转到普通的 index.html?

Id preferably like to use jQuery for this.我最好为此使用 jQuery。 Any help would be greatly appreciated!任何帮助将不胜感激!

Thanks!谢谢!

You don't need jQuery.你不需要jQuery。

You can use screen.width , which works in all browsers :您可以使用screen.width它适用于所有浏览器

if (screen.width <= 1024) window.location.replace("http://www.example.com/1024.html")
else window.location.replace("http://www.example.com/index.html")

See http://www.dynamicdrive.com/dynamicindex9/info3.htmhttp://www.dynamicdrive.com/dynamicindex9/info3.htm

 if ($(window).width() <= 1024) location.href = "1024.html";

关于width()文档width()

$(document).ready(function() {
    if (screen.width >= 1024) {
        window.location.replace("http://example.com/1024.html");
    }
    else  {
        window.location.replace("http://example.com/index.html");
    }
});

Reference notes in the answer to this question on difference between window.location.replace and window.location.href . 这个问题答案中关于window.location.replacewindow.location.href之间差异的参考注释。

Using an else statement like in the answers above results in an infinite loop if it is used for the index.html (ie the page a user will land on by default)如果将else语句用于 index.html(即用户将默认登陆的页面),则使用上面答案中的else语句会导致无限循环

For a simple Desktop Page to Mobile Page redirect对于简单的桌面页面到移动页面重定向

In the <head> of your index.html:在 index.html 的<head>中:

<script>
    if (screen.width <= 1024) {
    window.location.replace("http://www.yourMobilePage.html");
}
</script>

Ben, it seems to work but 2 issues : How to keep the actual page where the user is ?本,它似乎有效,但有两个问题:如何将实际页面保留在用户所在的位置?

How to auto load the script ?如何自动加载脚本? When resizing, the page must be refresh to be redirected.调整大小时,必须刷新页面才能重定向。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM