Wednesday, 3 February 2016

Media Queries

When creating a CSS media query you are able to specify more than just device widths or heights. The following code is a sure way to detect if the device has Retina Display. This works best when the images you use on your site are backgrounds of divs so that in the media query you just change the image with the one that is double in size. This way, the big images are only loaded for the Retina Display devices.
1
2
3
4
5
6
7
8
9
10
11
@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) {
 
  /* Retina replacement CSS here */
 
}

Retina.js

Retina.js

If you don’t fancy the media query solution that is perfectly fine. There is a JavaScript plug in to solve this issue! “retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays.” How this plug in works is that when you have two images, one of the intended/original size and the other one double that size, retina.js detects when there is a Retina Display being used and changes the images accordingly. It is very simple to work with and I suggest checking it out. All you have do is to make sure that you name your images accordingly to work with the plug in.

Icons

svg icons
Thanks to @font-face and fonts that are made up of icons instead of letters, you are welcome to utilize them instead of images. I very well support this method for two reasons. First, fonts are great at scaling in a similar way that SVG do, therefore they not only scale to different screen sizes but also to different resolutions such as Retina.
Also, currently @font-face browser support is very high and is only growing. Most current browsers – mobile and desktop – support @font-face which allows many users to see your icon fonts perfectly. To learn more about @font-face check out this snazzy article: What is @font-face and how to use it in CSS.

0 comments: