iPad Pro 12.9 inch portrait breakpoint

Design help General
1

Is there a reason why the portrait breakpoint for a 12.9 inch iPad pro is set as a desktop breakpoint? Just noticed this testing a new site and it’s feeling very cramped.

Obviously can fix this with media queries but it’s quite a lot of elements to have to write custom code out for when it should really be set as a tablet breakpoint?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
2

It’s because of its big viewport size - 1024 x 1366 px fits into the desktop breakpoint, since desktop is 992 px and up.

1 Like
3

Webflow’s base media queries are:

@media screen and (max-width: 991px) {
/* tablet .. */
}
@media screen and (max-width: 767px) {
/* Phone landscape ... */
}
@media screen and (max-width: 479px) {
/* Phone .. */
}

/* and if you add the larger breakpoints */
@media screen and (min-width: 1280px){
 /* modern desktops ... */
}
@media screen and (min-width: 1440px){

}
@media screen and (min-width: 1920px){

}

So greater than > 991 (IPad) is desktop. A lot of us are not happy with this but it is what it is. This most likely came from Bootstrap (at least that is mobile first and you can customize breakpoints).

If you look at desktop screen stats worldwide (2021) you can safely target the 1280 up breakpoint for desktops and leave the default to 1280 as tablet. See Desktop Screen Resolution Stats Worldwide | Statcounter Global Stats

Personally I prefer a desktop view on my iPad Pro’s.

2 Likes