Detecting 4K/Ultra High Definition (UHD) with JavaScript

Question

4K devices are becoming more popular. I am developing a website and I have a mobile phone that has a UHD display. I noticed that the images are blurry. I immediately thought could it be that fact it was 4K. By doubling the image size as shown in the examples below I found that it was not blurry anymore.

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

Standard HD/SD:<img src="/images/logo-96x64.png" width="96" height="64" />

My question is, how can you detect a 4K/UHD display using JavaScript so that you can dynamically include the double-resolution images when a 4K display is detected. The reason I want to do this is to cut down on my pages' load times as loading these larger resolution images is resource intensive.

Perhaps media query http://stackoverflow.com/questions/19933143/css-media-queries-pixel-density-desktop-and-mobile-devices — mplungjan, Oct 03 '14 at 04:12
For logos and icons (but not for pictures), you can sidestep the issue with vector fonts (like glyphicons) instead of bitmap images. — Thilo, Oct 03 '14 at 04:14
@Cory Danielson Do you have any clue what the pixel ratio is for UHD/4K? — Stephen Sabatini, Oct 03 '14 at 04:50
Nope, you can test it out with `window.devicePixelRatio` I'm pretty it'll be the same value that you'll see in CSS. On my normal monitor window.devicePixelRatio is 1, but on a retina display it's 2. — Cory Danielson, Oct 03 '14 at 15:15

score 4 · Accepted Answer · edited May 23 '17 at 12:17

4

You could write your own function to test

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 ) 
}

Or you could do inline.

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

I used 3839 for this check because of some displays stated here: http://en.wikipedia.org/wiki/4K_resolution.

I don't know if there is a working method for this though...

To the reason why you are doing this test, have you tested this: Serving Different Size Images For Different Devices Based On Resolution Using JavaScript

Also have you asked yourself this questions: http://css-tricks.com/which-responsive-images-solution-should-you-use/ ?

edited May 23 '17 at 12:17

Community

1
1

answered Oct 03 '14 at 04:58

eri0o

2,285
4
27
43

1

I'm not sure if that will work, because there can be lower resolutions that the 3840 such as on a mobile phone, but on a 4K display it will still display twice that amount of pixels per square inch, am I correct? The question is very difficult to answer at this time but based on responses I'm trying to get a feel for the right answer here there has been many interesting responses – Stephen Sabatini Oct 03 '14 at 17:09
I don't own a 4k phone, could you upload or link a image so I could understand? Have you tried using the media in the image to choose based on width? – eri0o Oct 03 '14 at 22:19

Detecting 4K/Ultra High Definition (UHD) with JavaScript

1 Answers1