1

What is an efficient way to detect small devices in javascript?

I tried to do that with media queries, and I tested max-width and max-device-width.

Everybody says that max-width should be used.

But in my test with Chrome on a Moto G5 max-device-width indicates the mobile device much better:

window.innerWidth: 980 // could be a monitor
window.innerHeight: 1394

screen.width: 360 // small, indicates a mobile device
screen.height: 640

window.devicePixelRatio: 3

(min-width: 500px): true
...
(min-width: 1200px): true // could be a monitor

(min-device-width: 300px): true
(min-device-width: 400px): false // small, indicates a mobile device

min-device-width seems to correspond to screen.width. Both distinguish the mobile device from a monitor.

Since everybody is suggesting to use max-width I wonder:

How can you use that to distinguish mobile device from a monitor?

Where am I wrong?

Nathan Perigreth
  • 149
  • 1
  • 9
  • Refer below link I think this link is useful for you. https://stackoverflow.com/questions/6850164/get-the-device-width-in-javascript – Janki Gandhi Apr 18 '18 at 18:42

1 Answers1

0

window.innerWidth / min-width / max-width should be used. screen.width is the width of the entire screen which may be bigger than the window.

In order to get usable values from window.innerWidth / min-width / max-width, you have to put this in the head section of the html file:

<meta name="viewport" content="width=device-width, initial-scale=1">
Nathan Perigreth
  • 149
  • 1
  • 9