Question

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?

Answer 1

应该使用

window.innerWidth / min-width / max-width。 screen.width是整个屏幕的宽度，可能比窗口大。

为了从window.innerWidth / min-width / max-width获取可用值，您必须将其放在html文件的head部分中：

<meta name="viewport" content="width=device-width, initial-scale=1">

Determining small devices: max-width really better than max-device-width / screen.width?

1 个答案: