Switch web site to mobile css client side with JQuery

Question

I am trying to change the display of my web pages depending on the version of the browser and space on screen. I need to completely change the look of the pages as follow:

• If the site is displayed on a mobile phone I want the mini version.
• If the site is displayed on a desktop browser but the size of the window is too small I want the mini version.
• If the site is displayed on a desktop browser and the window can accommodate the full version I want the full version displayed.
• If no javascript is available the full version should display.

I just started with some pretty basic code which relies on userAgent:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) )

Is there a clean way to achieve what I'm trying to do with JQuery for example?

Answer 1

Use CSS media queries. Sniffing the user agent is not reliable, and will lead to maintenance headaches in the future. Also, using media queries means no javascript is required which is good from a separation of concerns point of view.