css3_media_queries

iPhone 6 Plus & iPads CSS Media Queries

While making a responsive websites targeting the specific devices, we need to use the media queries. And, since new iPhone and iPads are in the market I have listed for iPhone 6 Plus & iPads CSS Media Queries that will help us to tackle the responsiveness of website on those devices.

iPad Media Query (iPad Mini)

iPad in portrait & landscape:

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

{ /* Define your style here /*}
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)

{ /* Define your style here */}
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)

{ /* Define your style here */}

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 6 Media Query

iPhone 6 in portrait & landscape:

@media only screen and (min-device-width : 375px) and (max-device-width : 667px) { /* Define your style here */ }

iPhone 6 in landscape:

@media only screen and (min-device-width : 375px) and (max-device-width : 667px)
and (orientation : landscape) { /* Define your style here */ }
iPhone 6 in portrait:

@media only screen and (min-device-width : 375px) and (max-device-width : 667px)
and (orientation : portrait) { /* Define your style here */ }

iPhone 6 Plus Media Query

iPhone 6 Plus in portrait & landscape:

@media only screen and (min-device-width: 414px) and (max-device-width : 736px) { /* Define your style here */ }
iPhone 6 Plus in landscape:

@media only screen and (min-device-width: 414px) and (max-device-width : 736px) and (orientation : landscape) { /* Define your style here */ }

iPhone 6 Plus in Portrait:

@media only screen and (min-device-width: 414px) and (max-device-width : 736px) and (orientation : portrait) { /* Define your style here */ }