Redirect based on screen resolution with jQuery?

jquery html css xhtml

10,757

Solution 1

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

Solution 2

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

docs on width()

Solution 3

$(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.

Solution 4

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>

View more solutions

10,757

Author by

Karlgoldstraw

Digital designer in London.

Updated on June 12, 2022

Comments

Karlgoldstraw almost 2 years

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?

Id preferably like to use jQuery for this. Any help would be greatly appreciated!

Thanks!
Pekka over 13 years

Good point about location.replace, but why wait until document.ready?
Dean Taylor over 13 years

No particular reason for document.ready, just a natural response to a jQuery question.