Redirect URL Based On Browser Resolution

Question

If user uses resolution smaller than 1024x600, i want it ro redirect them to the mobile version of my site. Now i'm doing so using JQuery, if the resolution is less than 1024x600, it will be redirected to mobile version. I'm concerned whether it is a good practice or not (redirecting using script), and if it's now what do you suggest (since as far as i know PHP can't detect browser resolution)?

Any suggestion would be appreciated, thank you.

PS. I'm using a full-height website which looks nice in resolution 1024x600 or larger, but not on smaller ones, so i made the mobile version to go with full height website and mobile support. I don't want to use browser detection since i want mobile devices with big resolutions to access standard website.

Edit: I was handed down a design of full-height single-page horizontally site, and i was having difficulties in making it responsive(if the content is fluid then it won't be full-height with no vertical scrolling) so i made a mobile version.

Answer 1

Its absolutely fine to redirect to another page depending on certain circumstances. But there are some other better ways of doing that.

To solve your problem, learn about types of layouts .

Fluid layout would suit best for your requirement. Ideally you should be using same set of stylesheets for various viewports.

Take a look at jQuery mobile 's website. Try changing your browser window size and see how the content automatically "fits" into your window. You have to do the same thing. :)

Its a fluid layout. :)

PS : I'd recommend not using CSS media queries. Of course they will make your life a lot easier, but if you care to REALLY improve your skills as long as CSS goes, try building your things with minimum use of advanced features.

Answer 2

Probably the best practice is to use CSS media queries to serve different CSS based on the user's screen dimensions, unless your mobile and desktop site are radically different.

You're right that PHP can not determine the end user's screen dimensions.

Answer 3

The cleanest design is where you source one set of HTML/JS/CSS from the server and the page adapts itself to the available screen size using some combination of CSS media queries and/or javascript.

If you can't do that or if you have other reasons to want to source different HTML from the server, then it's best to find a way to avoid client-side redirects all the time because those extra round-trips are undesirable (especially on mobile).

Some sites set a cookie in the browser that has the screen resolution in it and except for the first visit to the site, the server can then see the screen resolution in the cookie before it renders the site and you can avoid the client-side redirect and can render the desired page based on the resolution in the cookie.

For the first visit (when the cookie wasn't set yet), you do the client-side redirect and set the cookie.

Then, you also have to modify that cookie if the user changes their screen resolution (which doesn't happen all that often).