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

iPhone 4和6的800px是不够的？它现在怎么样？发生这种情况的页面是msolonko.net。

Answer 1

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

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

主要是你为iPhone6设备应用了错误的 min-width 和 max-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.*/
}

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

1 个答案: