Target different devices with CSS or Javascript

Tablets, smartphones, notes, pads and so many out there with different names. We simply name them as devices. Each device holds different width and height (in pixels) and to perform functions or styling on different screen sizes we can use CSS or Javascript to detect their sizes.

Responsive designs are most known reason to do so, however many Javascript functions are need to be performed in specific screen sizes. Here is a how to guide to detect specific size devices with some of the most popular devices used today.

Using CSS

Media queries, nothing new, however things need to be clear like, screen orientation, max width, min width, screen resolution etc. To detect a devices purely with CSS is quite detail stuff because today many devices share same screen size. So if you are trying to target just iPhone then you need to add all the stuff matches iPhone specifications.

Lets go with some basic stuff, we use logical operators (eg and) to put conditions for screen sizes and other stuff. Following is some example, this one will target iPhone 6 plus in landscape mode.

@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {

}

Above one will target iPhone, so basically we are not using any keyword iPhone6 to target iPhone, instead we will use device properties to target that specific device.

For some normal situations when the device is not a specific target then min-width and max-width properties are used, that is actually browser viewport or window. But when we talk about device-width then it is actually the screen resolution of device. device-width should be used with max or min.

Reference: Check out this page for complete iPhone and iPad targeting stuff.

Browser support for CSS3 Media queries is listed below:

Chrome For Android 42	Opera Mini 8	iOS Safari 7.1	Android Browser 4.1

Like and you can use , or or keyword for better condition. Like if you wanted to target a handheld device only but as we know, now a days many handheld device get resolutions close to non-handheld devices than there is an option called, CSS media types.

Media Type	Description
all	Used for all media type devices
aural	Used for speech and sound synthesizers
braille	Used for braille tactile feedback devices
embossed	Used for paged braille printers
handheld	Used for small or handheld devices
print	Used for printers
projection	Used for projected presentations, like slides
screen	Used for computer screens
tty	Used for media using a fixed-pitch character grid, like teletypes and terminals
tv	Used for television-type devices

Here is a example of media type:

@media all and (max-width: 700px) and (min-width: 500px) {
    article {
        width:50%;
    }
}

Since and word is used between all the conditions therefore media should comply with these conditions.

Screen resolution and confusions

Since we got those high resolution stuff right now with retina display that enhances our visual content to a whole new upgraded level is actually due to fitting 2 pixels in a place of one. iPhone 4 was the first phone with retina display and showed pixel-ratio of 2. Means double the size of actual device width.

As I've used above in first code -webkit-min-device-pixel-ratio which is actually for this purpose. So never fall in to find different screen resolutions. Stick with device width and use related pixel ratio for fine output.

Okay I got this from CSS-Tricks, this one is for older browsers. 

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px), only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 700px), only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 700px), only screen and (min-device-pixel-ratio: 2) and (min-width: 700px), only screen and (min-resolution: 192dpi) and (min-width: 700px), only screen and (min-resolution: 2dppx) and (min-width: 700px) {

    /* Medium screen, retina, stuff to override above media query */

}

Using Javascript

If you want to use some sort of quick solution then use screen.width property of Javascript and put that in condition but, seriously? Its not only about screen width, its about media, its about pixel ratio and targeting a device completely so its not enough anyways.

Instead of using that way, Javascript got window.matchMedia which works as great as CSS3 media queries. Here is an example of that:

if (window.matchMedia('all and (max-width:400px)').matches) {
    //Do something if its true
}

To make Javascript work on resizing window, here is a blog post by Paul Hayes, describing to do that with CSS3 transitionEnd property. Browser support is not quite interesting.

Internet Explorer 10	Firefox 31	Chrome For Android 42	Opera Mini No	iOS Safari 7.1	Android Browser 4.1

If you want to extend some support then try matchMedia polyfill, developed by Paul Irish. I didn't found how much better support it provides, anyways something is better than nothing.