Блог

Расположение между средними и маленькими экранами в моем приложении сильно отличается, и я использую контрольные точки Material UI, чтобы выбрать правильный макет.

Из того, что я могу сказать в документации, small экраны находятся 600px вверху и внизу. Однако даже с этими точками останова компоненты на iPad по-прежнему отображаются так, как если бы это был маленький экран, хотя его ширина 768px составляет .

Например:

 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>
)
 

Эти два блока в целом прошли довольно гладко, за исключением iPad, который отображает маленький блок. Все настройки точки останова темы остаются в Material UI по умолчанию.

Что происходит? Есть ли какие-то конкретные настройки, относящиеся к планшетам, которые я пропустил? Как я могу это исправить и всегда рассматривать все, что указано выше 600px , как средний экран?

Точки останова Material-ui определяются таким образом:

xs, очень маленький: 0 пикселей sm, маленький: 600 пикселей md, средний: 960 пикселей lg, большой: 1280 пикселей xl, очень большой: 1920 пикселей

Точка останова переходит от указанного выше значения (включительно) к следующей точке останова (исключительной).

Поэтому точка останова sm будет включать iPad 768 пикселей. Маленькие экраны НЕ имеют размера 600 пикселей и меньше, то есть xs. Они имеют размер 600 пикселей и более (до 960 пикселей, но не включая их).

Смотрите документацию по адресу: https://material-ui.com/customization/breakpoints /