Screen Detecting and re-sizing stuff

Question

I have a main menu and a game for the app I am developing, the problem is that everything is made and margined/sized for the iphone/ipod 4 display.

My question is how can I detect what device the user is playing on using jQuery, and what would be the best way to change the margins, as you can see in the fiddle I have below that the buttons have a margin to move it left, if I were to change the width of that for lets say Iphone six display it would not be centered it would be to the left of were I want it.

Below is some code and a javascript/jQuery fiddle, with HTML and CSS.

width: 320px;
height: 480px;

That is what i currently have as far as the screen width's go. and the margin-lefts here.

margin-left: 90px;

Here is a link! jSfiddle .

Answer 1

Using jQuery, you can detect the width of a device like this:

var isMobile = false;
var width = $(window).width();
if (width <= 350) {
      isMobile = true;
}

Or, if you want to try and detect the device:

var isIDevice = (/iphone|ipad/i.test(navigator.userAgent.toLowerCase()));

The first example simply detects the width of the screen. If it's below or equal to 350px, it is probably save to say that you deal with a mobile device (in portrait mode). For portrait and landscape mode use 480px instead.

The second example detects the device. If it's an iphone or ipad, 'isIDevice' will be true. However, I do not suggest you use that one, it's called browser sniffing and in my experience it is not always accurate.

The best way to handle different screens are media queries. Using CSS, you can detect the screen width/height and style your page accordingly.

Let's say, you need to detect the width of an IPhone4 and adjust your elements according to that width. You do it like that:

@media screen and (max-width: 320px) {
  body {
    background: #ccc;
  }
}

The above example is a media query. If I translate this to human language, it goes something like that:

"If it is a screen (not printer or whatever) AND if the screen is smaller or equal to 320px THEN use this CSS"

Above this media query you can define the background to be black for example:

  body {
    background: black;
  }

@media screen and (max-width: 320px) {
  body {
    background: #ccc;
  }
}

Now, if the screen is wider than 320px, the background will be black. And if the screen is equal to or smaller than 320px, the below CSS will become active and because it is defined after the first CSS (black background), it will take over thus making the background gray.

You can detect much more, than just the width. With media queries you can detect the width/height of the screen, the pixel ratio, the device orientation,...

There are almost infinite possibilities if you use media queries, using JavaScript for conditional styling makes sense only in very specific scenarios. If you can, use media queries instead of JavaScript.