javascript - 使用 JavaScript 检测 4K/超高清 (UHD)

Question

4K 设备越来越受欢迎。我正在开发一个网站，我有一部带有超高清显示屏的手机。我注意到图像很模糊。我立即想到会不会是 4K 的事实。通过如下例所示将图像大小加倍，我发现它不再模糊了。

4K/超高清: <img src="/images/logo-192x128.png" width="96" height="64" />

标准高清/标清: <img src="/images/logo-96x64.png" width="96" height="64" />

我的问题是，如何使用 JavaScript 检测 4K/UHD 显示器，以便在检测到 4K 显示器时动态包含双分辨率图像。我想这样做的原因是为了减少我的页面的加载时间，因为加载这些较大分辨率的图像是资源密集型的。

Answer 1

您可以编写自己的函数来测试

test4k = function() {
var width, height, test;

width = screen.height
height = screen.width

if( height < width) {
    test = height
} else {
    test = width
}

console.log(test)

return ( test > 4000 ) 
}

或者您可以内联。

test4k = function() { return ((screen.height < screen.width) ? (screen.width > 3839 ) : (screen.height > 3839 ) ); }

我使用 3839 进行此检查，因为这里有一些显示:http://en.wikipedia.org/wiki/4K_resolution .

虽然我不知道是否有这样的工作方法...

你做这个测试的原因，你测试过这个:Serving Different Size Images For Different Devices Based On Resolution Using JavaScript

您是否也问过自己这个问题:http://css-tricks.com/which-responsive-images-solution-should-you-use/ ？