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.

Answer 1

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