用JavaScript检测4K/超高清

Question

4K设备正变得越来越流行。我正在开发一个网站，我有一个手机，有一个UHD显示器。我注意到图像很模糊。我立刻想到可能是4K的事实。通过翻倍的图像大小，如下面的例子所示，我发现它不再模糊了。

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

标准HD/SD:<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进行这一检查，因为这里显示了一些显示：resolution。

我不知道是否有可行的方法.

对于您进行此测试的原因，您是否测试过以下内容：Serving Different Size Images For Different Devices Based On Resolution Using JavaScript

你有没有问过自己这个问题：http://css-tricks.com/which-responsive-images-solution-should-you-use/？