Geek Answers Handbook

Redirect based on screen resolution using jQuery?

Is it possible, using jQuery, to redirect to another index.html based on the user's screen resolution? So, for example, screens up to 1024 pixels in size are widely used in 1024.html, and all the rest go to regular index.html?

I'd rather use jQuery for this. Any help would be greatly appreciated!

Thanks!

+6
jquery html css xhtml
source share
4 answers

You do not 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

+4
source share
  if ($(window).width() <= 1024) location.href = "1024.html";

docs on width()

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

Link to the answer to this question on the difference between window.location.replace and window.location.href .

+2
source share

Using the else operator, as in the above answers, leads to an infinite loop if it is used for index.html (i.e. the page to which the user lands by default)

To easily redirect page page to mobile page

In the <head> your index.html:

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

More articles:


All Articles