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

Question

4K devices are becoming more popular. I am developing a website and I have a mobile phone with a UHD display. I noticed that the images are blurry. I immediately thought it was 4K. By combining the image size as shown in the examples below, I found that it is no longer blurry.

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 dual-resolution images when a 4K display is detected. The reason I want to do this is to reduce the loading time of my pages, since downloading these high resolution images is resource intensive.

Answer 1

You can write your own function for testing.

 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 can do inline.

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

I used 3839 for this check due to some of the mappings listed here: http://en.wikipedia.org/wiki/4K_resolution .

I do not know if there is a working method for this, though ...

For what reason are you running this test, have you checked this: Serving images of different sizes for different devices based on resolution using JavaScript

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

Answer 2

This can be done using media queries as shown below. Also, to use this on img , you need to set the image to load a transparent 1x1 pixel image, and then just set the background-image as well as the height and width with CSS.

 /* 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) {} 

Source: https://css-tricks.com/snippets/css/retina-display-media-query/