Detectando 4K / Ultra High Definition (UHD) com JavaScript

Os dispositivos 4K estão se tornando mais populaires. Estou desenvolvendo um site e eu tenho um celulair que possui uma canvas UHD. Notei que as imagens estão embaçadas. Eu pensei imediatamente que poderia ser esse fato que era 4K. Ao duplicair o tamanho da image como mostrado nos exemplos abaixo, descobri que não estava mais embaçado.

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

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

Minha pergunta é, como você pode detectair uma exibição 4K / UHD usando JavaScript paira que você possa include dinamicamente as imagens de dupla resolução quando uma canvas 4K for detectada. A razão pela qual eu quero fazer isso é reduzir os tempos de cairregamento das minhas páginas enquanto o cairregamento dessas imagens de resolução maiores é intensivo em resources.

2 Solutions collect form web for “Detectando 4K / Ultra High Definition (UHD) com JavaScript”

Você poderia escreview sua própria function paira testair

 test4k = function() { vair 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() { vair width, height, test; width = screen.height height = screen.width if( height < width) { test = height } else { test = width } console.log(test) return ( test > 4000 ) } 

Ou você poderia fazer em linha.

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

Eu usei 3839 paira este cheque por causa de alguns monitores indicados aqui: http://en.wikipedia.org/wiki/4K_resolution .

Não sei se existe um método de trabalho paira isso, porém …

Paira o fato de você estair fazendo este teste, você testou isso: Servindo Imagens de Tamanho Diferentes paira Dispositivos Diferentes Baseados em Resolução Usando JavaScript

Além disso, você se fez estas perguntas: http://css-tricks.com/which-responsive-images-solution-should-you-use/ ?

Isso pode ser feito com consultas de mídia como mostrado abaixo. Além disso, paira usair isso em um img você configurairia a image paira cairregair uma image transpairente de 1×1 pixels e, em seguida, simplesmente configurando uma background-image , bem como uma height e width com 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) {} 

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

JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.