[Resolved] Vertical and horizontal screen media queries

[David]

I think its fairly safe to say this will not be a feature of the theme. As well as Tom’s comments we also have to consider that like the vast majority of websites out there, most plugins and user created ‘responsive’ content is also based upon the standard breakpoints the theme uses. And applying a new breakpoint to the theme will not be applicable to 3rd party code.

However if you do need a custom breakpoint that can detect landscape tablets and mobile devices this is the best CSS i can come up with:

@media(max-width: 1366px) and (max-height: 1024px) and (min-width: 927px) and (min-height: 429px) and (hover: none) and (pointer: coarse) {
    /* CSS for largest ipad Pro tablet landscape view */
}

@media(max-width: 926px) and (max-height: 428px) and (hover: none) and (pointer: coarse) {
    /* CSS largest iphone landscape view */
}

the min/max widths are based on the largest apple devices available today, the hover/pointer queries detect that the device does not support traditional Hover events.

[Author]

Posts