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)?

Improve this question
2
  • 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. Commented Jul 17, 2015 at 22:17
  • It's doable with feature-detection (still not bulletproof), but ultimately CSS media queries should be more than sufficient Commented Jul 17, 2015 at 22:20

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.