使用JavaScript或CSS檢測窗口10縮放設置

Question

我注意到一臺帶有1920x1080屏幕的小型筆記本電腦，Windows 10會自動調整縮放比例。我已經看到它高達150％。有沒有辦法可以檢測到這個？我的媒體查詢不會在px中設置。

Answer 1

嘗試訪問window.devicePixelRatio變量。

Window屬性devicePixelRatio返回當前顯示設備的物理像素分辨率與CSS像素分辨率的比率。該值也可以解釋爲像素大小的比率：一個CSS像素的大小與一個物理像素的大小。簡單地說，這告訴瀏覽器應該使用多少個屏幕的實際像素來繪製單個CSS像素。它

更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

您也可以使用CSS resolution此，更多關於這個在這裏：https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution

@media (resolution: 150dpi) { 
    p { 
    color: red; 
    } 
}