iPad 3 Media Query

Once again, Apple did it!

What I mean by this is mostly mess-up with us, the developers and user interface developers, have to update yet again our CSS to add new media queries entries.

Based on the requirement, this new device has a resolution of 2048 by 1536 pixel and a 264 pixels per inch (ppi).

Now the thin line between the mobile and non-mobile resolution got a new face-lift. In other words, this device has more pixels than my 24 inches monitor. Obviously, using pixel in the media query tag won't work if you want to display a different layout for this high-tech device.

Fortunately, there's an easy fix ... and it's quite simple.

@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2)
{
  // your CSS
}