The layout between medium and small screens on my app is quite different, and I am taking advantage of Material UI's breakpoints to decide the proper layout.
From what I can tell in the documentation, small screens are to 600px and under. However, even with these breakpoints, on the iPad components are still being rendered as if it was a small screen, even though it has a width of 768px.
For example:
const MyComponent = () => (
<div>
<Box display={{ xs: 'none', sm: 'none', md: 'block', lg: 'block' }}>
Display only on MEDIUM screens and up! So, should be displayed on the iPad!
</Box>
<Box display={{ md: 'none', lg: 'none' }}>
Display only on SMALL screens. Should NOT be displayed on the iPad!
</Box>
</div>
)
These two blocks have been pretty smooth overall, except on the iPad which displays the small one. All the theme breakpoint settings are left in Material UI's default.
What is going on? Is there a specific setting relating to tablets that I have missed? How can I fix this and always treat anything above 600px as a medium screen?
Material-ui breakpoints are defined thus:
xs, extra-small: 0px sm, small: 600px md, medium: 960px lg, large: 1280px xl, extra-large: 1920px
A breakpoint goes from its value as above (inclusive) up to the next breakpoint (exclusive).
Therefore a breakpoint of sm will include the iPad 768px. Small screens are NOT 600px and under, that is xs. They are 600px and over (up to but not including 960px).
See documentation at: https://material-ui.com/customization/breakpoints/