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显示时动态包含双分辨率图像。我想这样做的原因是减少我的网页＆＃39;加载这些较大分辨率图像时的加载时间是资源密集型的。

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/？

使用JavaScript检测4K /超高清（UHD）

1 个答案: