html - Ipad 屏幕分辨率和桌面版本

Question

为什么这行不通。

body{
    @media screen and (min-width: 1024px) {
        min-width:1339px;
    }
}

我想如果用户在 Iphone 或 Ipad 2 上设置 min-width:1339px; 但如果在桌面浏览器上不添加任何最小宽度。

Answer 1

使用媒体查询，您不能将它们放在选择器中。

编辑：重新阅读后，我还看到您想将此应用于 iPad/iPhone，因此您需要最大宽度，而不是最小宽度。

@media screen and (max-width: 1024px) {
    body {
        min-width:1339px;
    }
}

Answer 2

把它放在body标签之外：

@media screen and (min-width: 1024px) { body { min-width:1339px;} }

Answer 3

为了设置这个最小宽度测量，媒体查询必须有一个 ID 或一个类来修改。您还必须用大括号将测量值括起来。

Example:

 @media screen and (min-width:1024px){
     body{min-width: 1339px;}
}

不要在媒体查询和第一个大括号之间放置空格，因为它会将媒体查询解释为无效。此外，请确保将所有样式放在大括号中，否则如果将其放在大括号之外，它会将样式应用于整个页面。

希望有帮助。

更新：

我想知道宽度是否可能是一个问题，但在我们得出这个结论之前。我想我找到了你缺少的东西。试试这个，更新的例子：

    @media screen only and (min-width: 1024px) {
     body{min-width: 1339px;}
    }

如果这不起作用，我尝试编辑宽度。因为我相信因为 min-width 测量不会显示，因为它大于 iPad 屏幕的最小宽度。如果你尝试改变宽度，我会设置一个基本宽度：1339px; 然后是最大宽度：85%；然后从那里往下走。通过这样做，这将使用 1339px 的宽度，然后将其缩小到您为 iPad 指定的任何百分比。它将使您的布局响应，我相信从我读到的内容是您正在尝试做的。

让我知道这个是否奏效。