Search code examples
javascriptphphttp-redirectscreenresolution

Screen resolution detection


I know that similar questions were asked but this is different.

Intro: i'm triyng to make an website with adaptive designs (3 templates for 3 widths intervals as follows: 1200+px, 600-1200px, 600-px).

Problem: i have a really hard time with user screen width detection. I' know that only js can detect user screen size so i tried two ways of detection. 1. First i used a cookie in order to store the width but because cookie becomes active only after refresh i need to refresh the page. 2. Second o used to send width as param with GET but again i need to refresh the page in order to send params.

So the question is: is there a way to get screen size without page refresh (the value to be stored in a cookie/session). I need the proper template to be delivered on first visit of page.

If there is no solution (only with refrest needed) for width detection how can a solve the problem for crawlers so they won't see the redirect.


Solution

  • Maybe I'm missing something here but you should be using @media queries https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries and http://css-tricks.com/snippets/css/retina-display-media-query/