iPad Media Query

Why iPad Media Query?

Now a days, Responsive Web Design (RWD) has become popular and every developer is supposed to keep in mind the RWD rules while developing the web layouts. UI developer has to develop the layout in such a way that it is compatible on desktop and device as well. Or the developed layout should be compatible on both device and desktop.

Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the future. From mobile browsers to notebooks and tablets, users are visiting your sites from an increasing array of devices and browsers.

CSS3 Media Query

CSS3 media query is used to assign different style sheets depending on browser window size. It is very useful when we creating websites or applications for different platforms. CSS3 Media queries allow you to target CSS rules based on – for instance – screen size, device-orientation or display-density. This means you can use CSS Media Queries to tweak a CSS for an iPad, iPhone, Android, Black Berry, printer or create a responsive site. Read more about Media Query…

iPad Media Query to target iPads

Let us see how we can target iPads and develop the layout using CSS3 media query. We will call this iPad specific media query as “iPad Media Query”. Let us be more specific!!

iPad in Portrait & Landscape

The following iPad Media Query can be used for generally targeting iPad.

@media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px)  { 
    /* add iPad specific styles here! */
}

Here, we are mentioning the ipad media query min-device-width 768px in portrait mode and max-device-width 1024px in landscape.

iPad Media Query for Portrait mode

if we want to be more specific on the device orientation or if we want to add some styles when the iPad is in portrait mode, we can use the following CSS.

@media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : portrait)  { 
    /* add iPad specific in portrait mode styles here! */
}

At the same time we add the device min width and max width, need to mention the orientation. And the styles mentioned here will be in effect when the device is in portrait mode.

iPad Media Query for Landscape mode

To target device in landscape mode, add the following CSS

@media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : landscape)  { 
    /* add iPad specific in landscape mode styles here! */
}

iPad Media Query for iPad 1 & 2

For adding different graphics or choose different typography for the lower resolution iPad display, the below given iPad Media Query will work for you.

@media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (-webkit-min-device-pixel-ratio: 1)  { 
    /* add iPad 1 & 2  specific styles here! */
}

Add device orientation specific styles with the orientation related line as we have seen already.

iPad Media Query for Retina

When we target the 3rd and 4th generation of iPads, we have to use different iPad Media Query. Target the Retina iPads with the following iPad Media Query.

@media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (-webkit-min-device-pixel-ratio: 2)  { 
    /* add iPad specific in landscape mode styles here! */
}

Here, we have to note the device pixel ratio, which is ‘2’.
In order to add device orientation specific styles, add the orientation related line as we have seen already.

iPad Media Query for iPad mini

What about iPad mini media queries? iPad mini has the same pixel ratio as iPad 1 & 2 have. So the iPad Media Query used for iPad 1 & 2 can be used for iPad mini also.

@media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (-webkit-min-device-pixel-ratio: 1)  { 
    /* add iPad mini  specific styles here! */
}

Hope this information was helpful for you. If not, let us not forget to share it with our developer friends… Keep sharing.. keep growing!!