6

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!

Karlgoldstraw
  • 618
  • 2
  • 11
  • 25

5 Answers5

4

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

Adam
  • 43,763
  • 16
  • 104
  • 144
3
 if ($(window).width() <= 1024) location.href = "1024.html";

docs on width()

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
2
$(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.

Community
  • 1
  • 1
Dean Taylor
  • 40,514
  • 3
  • 31
  • 50
1

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 Kremer
  • 94
  • 1
  • 8
0

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.

Martin
  • 21
  • 1