CSS Media Queries hack for iPads
Many time we need to target browser or device specific CSS to fix some problem. Here i am showing to target css only for iPad devices. I’ve posted these media queries to help designers & developers save some time searching.
For iPhone CSS media queries hack you can view complete list here.
CSS media query target only iOS devices
|
1 2 3 4 5 6 7 |
@supports (-webkit-overflow-scrolling: touch) { /* CSS specific to iOS devices */ } @supports not (-webkit-overflow-scrolling: touch) { /* CSS for other than iOS devices */ } |
iPad Media Queries (All generations – including iPad mini)
iPad in portrait & landscape
|
1 2 3 |
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* STYLES GO HERE */} |
iPad in landscape
|
1 2 3 4 |
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* STYLES GO HERE */} |
iPad in portrait
|
1 2 3 4 |
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* STYLES GO HERE */ } |
iPad 3 & 4 Media Queries
If you’re looking to target only 3rd and 4th generation Retina iPads (or tablets with similar resolution) to add @2x graphics, or other features for the tablet’s Retina display, use the following media queries
Retina iPad in portrait & landscape
|
1 2 3 4 |
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */} |
Retina iPad in landscape
|
1 2 3 4 5 |
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */} |
Retina iPad in portrait
|
1 2 3 4 5 |
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */ } |
iPad 1 & 2 Media Queries
If you’re looking to supply different graphics or choose different typography for the lower resolution iPad display, the media queries below will work like a charm in your responsive design!
iPad 1 & 2 in portrait & landscape
|
1 2 3 4 |
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1){ /* STYLES GO HERE */} |
iPad 1 & 2 in landscape
|
1 2 3 4 5 |
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */} |
iPad 1 & 2 in portrait
|
1 2 3 4 5 |
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */ } |
iPad mini media queries hack
Targeting the new iPad mini with CSS definitely isn’t as difficult as it could have been. Apple thankfully made things easy on developers and gave the iPad mini the same resolution as the iPad 1 and 2.
This means it’s really easy for developers to target all iPads with very little code, but it also means there’s no way to specifically target an iPad mini with pure CSS. In other words, nothing is new, and you might want to make your text a tiny bit bigger.
iPad mini in portrait & landscape
|
1 2 3 4 |
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */} |
iPad mini in landscape
|
1 2 3 4 5 |
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */} |
iPad mini in portrait
|
1 2 3 4 5 |
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */ } |
iPad mini Resolution
|
1 2 3 4 5 6 7 |
Screen Width = 768px (CSS Pixels) Screen Height = 1024px (CSS Pixels) Screen Width = 768px (Actual Pixels) Screen Height = 1024px (Actual Pixels) Device-pixel-ratio: 1 |
[paypal-donation]
