Blogger Ever

Target different devices with CSS or Javascript

Media queries in CSS3 while matchMedia in Javascript are easy to use ways to target specific media type or screen sizes.

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.
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.