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.
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/
I think you're approaching this the wrong way. Surely css @media queries are the way to do this?
If for some reason you do need the width in Javascript, then you can do
jQuery:
$(document).width();
JavaScript:
document.body.clientWidth
I would revise your methodology if you can though..?
I ended up using a DDR (Device Description Repository), exactly this one : http://wurfl.sourceforge.net/ It works good and gives a lot of etails exept on firefox. No CSS OR JS required for use.