1

I've seen around the web that the best way to make a responsive design is to use CSS @media queries. This does not seem like a practical solution as many phones identify as screen and have as many pixels as desktop monitors (i.e. the iPhone 6 Plus is 1080x1920 and some Android phones have even larger sizes). So if I said min-width: 800px; for my desktop design, many smartphones would use those rules.

One workaround is to use navigator.userAgent in JavaScript to detect mobile devices, but I've also heard that this is not widely compatible.

Is there a 'best' way to determine if a user is on a mobile device (preferably with JavaScript or CSS)?

Sam Crater
  • 13
  • 3
  • responsive design means to have best view in the screen resolution doesn't matter it is a phone, tablet or desktop ... so if you want responsive design, use @media ... all other will put you in a dead way. – Reflective Jul 17 '15 at 22:17
  • It's doable with feature-detection (still not bulletproof), but ultimately CSS media queries should be more than sufficient – MDEV Jul 17 '15 at 22:20

1 Answers1

1

If you add this code to your page head, the width of the viewport won't be the the actual number of pixels, but instead something compareable to a pixel density of 96dpi:

<meta name="viewport" content="width=device-width"/>

This results with a CSS width of 320 pixels on most smartphones even though their actual resolutions are higher.

Okku
  • 7,468
  • 4
  • 30
  • 43