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? So for example, screens upto the size 1024px wide go to 1024.html, and all others go to the normal index.html?开发者_StackOverflow
Id preferably like to use jQuery for this. Any help would be greatly appreciated!
Thanks!
You don't need jQuery.
You can use screen.width, which works in all browsers:
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.htm
if ($(window).width() <= 1024) location.href = "1024.html";
docs on 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.
Using an else statement like in the answers above results in an infinite loop if it is used for the index.html (i.e. the page a user will land on by default)
For a simple Desktop Page to Mobile Page redirect
In the <head> of your index.html:
<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 ?
- From : "http://www.example.com/PageXXX"
- To: "http://www.example.com/m" + "PageXXX"
How to auto load the script ? When resizing, the page must be refresh to be redirected.
加载中,请稍侯......
精彩评论