The TV
The Responsive was a little bit out of the “TV world” during the past, last year the 4K resolution TV or 4K Ultra the ‘four times HD’ TV, 3D TV, smartTV and curveTV were release in UK, and considering the new plans to release the 8K UHD TV soon, this revolution comes with a lot of developer questions.
720×578 -> 1280×720 -> 3840×2160 -> 4096×2160 -> ?
Image from: http://topmobiletrends.com/
4K means 3840×2160 resolution, it is a video format that is four-times the current HD standard of 1920x1080p (2.1 megapixels)
Questions:
– Resolutions we have so far we have: SD 720×578 -> HD 1280×720 -> Full HD 1920×1080 -> Quad 3840×2160 -> 4K/2K 4096×2160 … What is coming next?
– In the past it wasn’t necessary to create a responsive solution for TV’s, if you are planning just a TV solution, because mainly they were 3 main resolution: SD, HD and Full HD. Now, trends indicate the we need to re-think about our approach: We can use a “Device Detection” or “User Agent detection” solution way or finally move to “Responsive Web” and future-friendly path?
Responsive Media-queries for Media features:
In most cases, it is better to build the TV feature optimised version of your content on your existing site. The CSS media-queries is could be very helpful to determinate some features of the layout and Respond to this environment, let’s have a look at the most relevant:
Media Types:
- tv — for televisions and television like devices
|
1 |
@media tv and (device-width: 120em) { … } |
Media Queries
- width – width of display area/viewport
- height – height of display area/viewport
- device-width – width of device rendering surface
|
1 |
@media screen and (device-width: 800px) { … } |
- device-height – height of device rendering surface
- aspect-ratio – ratio of display’s width to height (16:9, 4:3)
- device-aspect-ratio – ratio of device rendering surface width to height (16:9, 4:3)
|
1 |
@media screen and (device-aspect-ratio: 16/9) { … } @media screen and (device-aspect-ratio: 32/18) { … } @media screen and (device-aspect-ratio: 1280/720) { … } @media screen and (device-aspect-ratio: 2560/1440) { … } |
- resolution (dpi or dpcm = dots per inch or dots per centimeter)- resolution of the output device (pixel density; 72dpi, 300dpi)
|
1 |
@media print and (min-resolution: 300dpi) { … } |
- scan – scanning process of “tv” output devices.
|
1 |
@media tv and (scan: progressive) { … } |
Example:
Including high-resolution graphics, but only for screens that can make use of them. “Retina” being “2x”:
|
1 2 3 4 |
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { /* Retina-specific stuff here */ } |
Check all your device media-queries at: