0

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?

Coyote
  • 2,273
  • 25
  • 45
  • Related: [best-way-to-detect-handheld-device-in-jquery](http://stackoverflow.com/questions/3514784/best-way-to-detect-handheld-device-in-jquery). By the way, do you really want the full site to be shown, if the client doesn't support Javascript? – asgs Dec 10 '12 at 15:53
  • @asgs This is where I found my current method for querying the mobile browser. But I am not comfortable with the hardcoded version. – Coyote Dec 10 '12 at 16:08

1 Answers1

3

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.

Rory McCrossan
  • 306,214
  • 37
  • 269
  • 303