I am facing a challenge with the layout of my app on different screen sizes. To address this issue, I am utilizing Material UI's breakpoints to control the layout based on the screen size.
According to the documentation, screens categorized as small are those that are 600px and below. However, even after implementing these breakpoints, components on the iPad still appear as if it is a small screen despite its width being 768px.
For instance:
const MyComponent = () => (
<div>
<Box display={{ xs: 'none', sm: 'none', md: 'block', lg: 'block' }}>
Display only on MEDIUM screens and up! 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>
)
Although these blocks work well in general, there seems to be an issue on the iPad where it displays the smaller block. The theme breakpoint configurations remain set to Material UI's default values.
I am puzzled by this situation. Have I overlooked any specific settings related to tablets? How can I ensure that anything above 600px is considered a medium screen consistently?