為什么此媒體查詢不適用於我的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設備應用了錯誤的最小寬度和最大寬度 。 適用於響應式設計的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.*/
}