ios - 为什么这个媒体查询不适用于我的 iPhone？

Question

我使用 iPhone 6 和 4 检查是否应用了另一个样式表。它没。这是我的样式表:

<link rel="stylesheet" media="screen and (max-width: 800px)" href="mobileindex.css">
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="desktopindex.css">

是的，它们之间存在差距。该空间是为以后的平板电脑保留的。出于某种原因，mobileindex.css 没有应用这些设置。我必须两次切换方向才能显示。然而，这解决了问题:

<link rel="stylesheet" media="screen and (max-width: 1000px)" href="mobileindex.css">
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="desktopindex.css">

800px 对 iPhone 4 和 6 来说不够吗？怎么现在能用了？发生这种情况的页面是 msolonko.net。

Answer 1

能否请您在主样式下方添加媒体查询，然后在您的移动设备中检查您的 Web 应用程序。

@media screen and (min-width:768px) and (max-width:1024px) {
   /*Your Mobile Style will be here.*/
}

主要是您为 iPhone6 设备应用了错误的 min-width 和 ma​​x-width。响应式设计的iPhone6真实尺寸如下。

iPhone 6 人像

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { 
    /*Your Mobile Style will be here.*/
}

iPhone 6 横屏

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) { 
    /*Your Mobile Style will be here.*/
}