Material UI 将 iPad（宽度 768px，高度 1024px）视为小屏幕

Question

我的应用程序中小屏幕的布局有很大不同，我正在利用 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显示小块外，这两个块总体上还算顺利。所有的主题断点设置都保留在MaterialUI的默认

这是怎么回事？我错过了与平板电脑相关的特定设置吗？我该如何解决这个问题并始终将 600px 以上的所有内容视为中等屏幕？

Answer 1

Material-ui 断点定义如下：

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

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

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

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

Material UI 将 iPad（宽度 768px，高度 1024px）视为小屏幕

Material UI treating iPad (768px width and 1024px height) as a small screen

css

grid-layout

reactjs

material-ui