5

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.

Improve this question

1 Answer 1

Reset to default
1

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

Improve this answer
4
  • Thanks @PaulSweatte. But, we've had to implement this in the Salesforce1 application.
    – SE_User
    Commented Dec 12, 2018 at 13:21
  • 1
    @SE_User Understood. If you must, there is a cheat sheet for iPad, iPhone, Samsung, and other device specific media queries.
    – Paul Sweatte
    Commented Dec 12, 2018 at 13:27
  • Yeah, we did use this in specific cases. Thanks a lot, @PaulSweatte. Would be great if you could add the above link in the answer as well so that it might be helpful for someone else.
    – SE_User
    Commented Dec 12, 2018 at 13:35
  • @SE_User It's been added.
    – Paul Sweatte
    Commented Dec 12, 2018 at 13:51

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .