為什么我的顯示分辨率與 screen.width * devicePixelRatio 不同？

Question

在devicePixelRatio上的MDN 文檔中，它說：

(devicePixelRatio) 告訴瀏覽器應該使用多少屏幕的實際像素來繪制單個 CSS 像素。

...所以我希望我的顯示水平分辨率為：

window.devicePixelRatio * window.screen.width = 2 * 1792 = 3584

... 但不是。 我的顯示器水平分辨率是 3072。

這是為什么？

Answer 1

在我看來，規范在這里不夠准確。

(devicePixelRatio) 告訴瀏覽器應該使用多少屏幕的實際像素來繪制單個 CSS 像素。

它應該是這樣的：

(devicePixelRatio) 告訴瀏覽器應該使用多少屏幕的實際 CSS 像素來繪制單個 CSS 像素。

因為那些“實際像素”實際上並不是真實的。 沒有雙關語的意思。

我找到了一個類似問題的絕佳答案，但我不喜歡“你不需要它”的言論。 TL;DR - 瀏覽器這樣做主要是出於遺留原因。

此外，我在w3c github上發現了一個關於“解決實際物理尺寸的能力”的巨大話題，在 CSS 中，但無論如何。 而且有這么多“咩，沒那么簡單……你知道……”的消息。 我喜歡這個：“對於什么是 px 沒有明確的概念”。

事實證明，實際上你可以獲得真正的縱橫比。 至少它對我有用。 我有一台 15 英寸顯示屏的 MacBook。 實際分辨率為2880x1800 。 在設置中，我的分辨率為1680x1050 （ window.screen所依賴的分辨率）。 真正的縱橫比是1.6 ，而不是2 (hello window.devicePixelRatio) 。

MediaTrackConstraints 的 aspectRatio 屬性返回實際的縱橫比：1.6。

const [track] = (await navigator.mediaDevices.getDisplayMedia()).getVideoTracks();
console.log(track.getSettings().aspectRatio);

但是有一個很大的警告，整個“Media Stream API”是關於從屏幕上捕獲視頻的，這就是為什么你必須獲得權限才能工作。 除了這個，我找不到任何能返回真實縱橫比的東西。

這就是我在一個小時左右找到的所有內容，我希望有足夠的信息來得出一些結論。