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