Is it possible to detect the HARDWARE (not viewport, not browser window, etc.) display resolution using either JavaScript or CSS? I'm assuming that CSS doesn't work, but I could be wrong about that. I'm very familiar with the various JavaScript techniques used to determine browser window and viewport resolution. What I haven't found anywhere is a method to detect a device's native HARDWARE display resolution.
Let me define "native HARDWARE resolution" with an example. A MacBook Pro (2019) has a viewport resolution of 1536 x 960 when its operating system display scaling is set to smallest text size, which is the maximum viewport resolution. Its native HARDWARE resolution is 3072 x 1920, which is 2.0 times the resolution of the maximum viewport resolution.
I want to detect the HARDWARE resolution of 3072 x 1920 on the MacBook Pro. This Stack Overflow post attempts to explain how to arrive at HARDWARE resolution but it doesn't work for all devices. That's because Windows 10 scales windows.devicePixelRatio
when the browser is zoomed or when Windows 10 display scaling is set to something other than 100%. Apple devices don't change windows.devicePixelRatio
when the browser is zoomed or operating system display scaling is changed, so the calculation shown in the post will return an incorrect value for Apple devices.
A CSS solution would be preferred, but I think that's impossible. If there's no CSS solution, is there a JavaScript solution?