使用JavaScript檢測4K /超高清（UHD）

4K設備越來越流行。我正在開發一個網站，我有一臺具有超高清顯示屏的手機。我注意到圖像模糊。我立刻想到它可能是4K這個事實。通過將圖像大小加倍，如下面的示例所示，我發現它不再模糊。使用JavaScript檢測4K /超高清（UHD）

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，這樣就可以動態地包括雙A 4K/UHD顯示器當檢測到4K顯示時，分辨率圖像。我想這樣做的原因是減少我的網頁的加載時間，因爲加載這些較大分辨率的圖像是資源密集型的。

2014-10-03 Stephen Sabatini

也許媒體查詢http://stackoverflow.com/questions/19933143/css-media-queries-pixel-density-desktop-and-mobile-devices – mplungjan 2014-10-03 04:12:04

有一個媒體查詢像素比例 – 2014-10-03 04:14:03

對於徽標和圖標（但不適用於圖片），您可以避免使用矢量字體（如glyphicons）而不是位圖圖像。 – Thilo 2014-10-03 04:14:24

你可以編寫自己的測試功能，測試

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

來源

2014-10-03 04:58:31 Elric

我不確定這是否可行，因爲3840可能具有較低的分辨率，例如在手機上，但在4K顯示器上它仍然會顯示兩倍於每平方英寸的像素量，我是否正確？這個問題目前很難回答，但基於回答，我試圖在這裏得到正確答案的感覺，這裏有很多有趣的迴應 – 2014-10-03 17:09:41

我沒有4k手機，你能上傳或鏈接圖像嗎？所以我能理解？您是否嘗試過使用圖片中的媒體根據寬度進行選擇？ – Elric 2014-10-03 22:19:46

這可以通過媒體查詢完成，如下所示。此外，爲了在img上使用此功能，您可以將圖像設置爲加載1x1像素透明圖像，然後使用CSS簡單設置background-image以及height和width。

/* Retina Display */ 
@media 
only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min--moz-device-pixel-ratio: 2), 
only screen and (-o-min-device-pixel-ratio: 2/1), 
only screen and (min-device-pixel-ratio: 2), 
only screen and (min-resolution: 192dpi), 
only screen and (min-resolution: 2dppx) {}

來源：https://css-tricks.com/snippets/css/retina-display-media-query/

來源

2015-10-19 01:11:18

使用JavaScript檢測4K /超高清（UHD）

回答

相關問題