Material UI 将 iPad（768px 宽和 1024px 高）视为一个小屏幕答案

【问题标题】：Material UI treating iPad (768px width and 1024px height) as a small screenMaterial UI 将 iPad（768px 宽和 1024px 高）视为一个小屏幕
【发布时间】：2020-12-11 17:01:28
【问题描述】：

我的应用中中小屏幕的布局完全不同，我利用Material UI's breakpoints 来决定合适的布局。

从我在文档中可以看出，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 以上的任何内容视为中等屏幕？

【问题讨论】：

标签： css reactjs material-ui grid-layout

【解决方案1】：

Material-ui 断点是这样定义的：

xs，超小：0px sm，小：600px md，中：960px lg，大：1280px xl，超大：1920px

断点从上面的值（包括）到下一个断点（不包括）。

因此 sm 的断点将包括 iPad 768px。小屏幕不是 600px 及以下，即 xs。它们是 600 像素及以上（最高但不包括 960 像素）。

请参阅文档：https://material-ui.com/customization/breakpoints/

【讨论】：

废话...我完全误读了文档或有其他想法。感谢您抽出宝贵时间澄清这一点。