Custom CSS Media Queries for IOS Devices

0

IOS Media Queries

CSS media queries for iPad, Mini Ipad and iPhone helps to target device screens while displaying a website. These IOS media queries help to designers and developers to save time instead of searching for this code. Responsive design is a crucial and very necessary concept in modern web designing. The following code snippets are CSS media queries boilerplate for an iPad, mini iPad and iPhone.


iPad Media Queries

Media queries for IPad 1, 2, 3, 4 and 5 in portrait, landscape and portrait & landscape together. Apple iPad media queries are the same for all iPads 1 to 5 and mini iPad. But for a responsive design, you need to change styles.

iPad in portrait and  landscape

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{ // CSS styles
}

iPad in Portrait

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
{
// CSS Styles
}

iPad in Landscape

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
{
// CSS Styles
}

iPad 3 & 4 Media Queries

To target only 3rd and 4th generation Retina iPads, add the following CSS media queries.

Retina iPad in portrait & landscape

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2)
{
// CSS Styles
}

Retina iPad in portrait

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2)
{
// CSS Styles
}

Retina iPad in landscape

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2)
{
// CSS Styles
}

iPad 1 & 2 Media Queries

To target only 1st and 2nd generation Retina iPads, add the following CSS media queries.

Retina iPad in portrait & landscape

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)
{
// CSS Style
}

Retina iPad in portrait

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) {
// CSS Style
}

Retina iPad in landscape

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)
{
// CSS Style
}


Mini iPad Media Queries

Apple made things easy to developers because of the iPad Mini has the same resolution and pixel ratio as the iPad 1 & 2.

iPad Mini In Portrait & Landscape

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)
{
// CSS Style
}

iPad Mini In Portrait

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) {
// CSS Style
}

iPad Mini In Landscape

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)
{
// CSS Style
}

iPad mini resolution

Screen Width = 768px (CSS Pixels)
Screen Height = 1024px (CSS Pixels)

Screen Width = 768px (Actual Pixels)
Screen Height = 1024px (Actual Pixels)

Device-pixel-ratio: 1


iPhone Media queries

The following CSS code snippets are media queries for iPhone 5, 4s, 4, 3g and 2g.

iPhone 5 media queries

iPhone 5 media queries in Portrait & Landscape, portrait and landscape.

iPhone 5 In Portrait & Landscape

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
{
// CSS Style
}

iPhone 5 In Portrait

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait)
{
// CSS Style
}

iPhone 5 In Landscape

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape)
{
// CSS Style
}

iPhone 2G-4S in portrait & landscape

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
{
// CSS Style
}

iPhone 2G-4S in Portrait

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait)
{
// CSS Style
}

iPhone 2G-4S in Landscape

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape)
{
// CSS Style
}

Leave A Reply

Your email address will not be published.