How to detect a smartphone through JavaScript/CSS? -
i've seen around web best way make responsive design use css @media queries. not seem practical solution many phones identify screen , have many pixels desktop monitors (i.e. iphone 6 plus 1080x1920 , android phones have larger sizes). if said min-width: 800px; desktop design, many smartphones use rules. one workaround use navigator.useragent in javascript detect mobile devices, i've heard not compatible. is there 'best' way determine if user on mobile device (preferably javascript or css)? if add code page head , width of viewport won't the actual number of pixels, instead compareable pixel density of 96dpi: <meta name="viewport" content="width=device-width"/> this results css width of 320 pixels on smartphones though actual resolutions higher.