Media Queries for Standard Devices
iPad
/* ----------- iPad 1, 2, Mini and Air ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- iPad 3, 4 and Pro 9.7" ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* ----------- iPad Pro 10.5" ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 834px)
and (max-device-width: 1112px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
and (min-device-width: 834px)
and (max-device-width: 834px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
and (min-device-width: 1112px)
and (max-device-width: 1112px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* ----------- iPad Pro 12.9" ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen
and (min-device-width: 1366px)
and (max-device-width: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}Laptops
Media Queries for laptops are a bit of a juggernaut. Instead of targeting specific devices, try specifying a general screen size range, then distinguishing between retina and non-retina screens.
/* ----------- Non-Retina Screens ----------- */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- Retina Screens ----------- */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
}
2019. 5. 3. 09:04
https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106
CSS Media Queries for iPad Pro
I know what you’re thinking. Why does this need a blog post? Can’t I simply use ‘min-width’ and ‘max-width’ media queries to isolate out…
medium.com
solution: min/max device widths.
The height/width of an iPad Pro in both portrait and landscape modes will always be static (1366/1024, 1024/1366 respectively). That means you can use browser width CSS media queries in combination with min/max device width queries (to exclude desktop browsers). You end up with the following:
$ipad-pro-portrait-breakpoint: "(min-device-width : 1024px) and (max-device-width : 1024px) and (min-device-height : 1366px) and (max-device-height : 1366px) and (min-width: 1024px) and (max-width: 1024px)";
$ipad-pro-landscape-breakpoint: "(min-device-width : 1024px) and (max-device-width : 1024px) and (min-device-height : 1366px) and (max-device-height : 1366px) and (min-width: 1366px) and (max-width: 1366px)";
// Responsive Mixins
@mixin respond($media) {
if $media == desktop {
@media only screen and (min-width: $medium-tablet-device-width + 1) and #{$desktop-only-breakpoint} { @content; }
}
@else if $media == ipad-pro-portrait {
@media only screen and #{$ipad-pro-portrait-breakpoint} { @content; }
}
@else if $media == ipad-pro-landscape {
@media only screen and #{$ipad-pro-landscape-breakpoint} { @content; }
}
// etc
}#shop_results {
@include respond(ipad-pro-portrait) {
.columns {
width: 24.35345%;
margin-left: 0.6%;
}
.columns:nth-of-type(4n+5) {
margin-left: 0%;
clear: both;
}
}
@include respond(ipad-pro-landscape) {
.columns {
width: 19.35345%;
margin-left: 0.2%;
}
.columns:nth-of-type(5n+6) {
margin-left: 0%;
clear: both;
}
}
@include respond(desktop) {
.columns {
width: 32.75862%;
}
.columns:nth-of-type(3n+4) {
margin-left: 0%;
clear: both;
}
}
}
view raw
