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

Question

4K设备正变得越来越流行.我正在开发一个网站,我有一个具有超高清显示屏的手机.我注意到图像模糊不清.我立刻想到这可能是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 进行此检查，因为此处列出了一些显示： http: //en.wikipedia.org/wiki/4K_resolution。

我不知道是否有一个工作方法......

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

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