Differentiate iPad Pro and iPad Air using slds | Lightning Design System

How to differentiate between iPad Pro portrait and the iPad Air/Mini landscape view in Lightning Design System?

The device width in the case of iPad Pro portrait is 1024px, which is same as in iPad Air landscape mode.

I currently use slds-large-size--2-of-3& slds-large-size--1-of-3 and
slds-size--1-of-1 (Grid System) for giving different layout in iPad Air’s landscape and portrait respectively. But this particular design is reflecting in iPad Pro’s portrait as well (Since it’s width is same as that in the case of iPad Air’s landscape).

Is there any slds sizing class or anything similar to $Browser.isIPad, specific to differentiate iPad Pro from iPad Air or iPad mini?

Is it a good method to write iPad Pro specific media query? (If so, how can I avoid media query conflict while using the Lightning App in Desktop, since iPad pro’s landscape width is 1366px which is approximately a normal desktop viewport width)

It would be great if anyone could provide me the best method to solve this issue.

PS: I’ve different layouts for portrait and landscape view.

Answer

For reference , use the CSS Device Media Queries cheat sheet.

Device specific media queries and device detection are both signs of:

  • Leaky abstractions
  • Top-down rather than bottom-up design
  • Assumptions that will not be forward compatible

A native app rather than a browser app would be a better solution in this case.

References

Attribution
Source : Link , Question Author : SE_User , Answer Author : Paul Sweatte

Leave a Comment