iPhone 的媒体查询为 iPhone 10 加载 css 而 iPhone 为 8

Question

我有一堆 css 为各种 iPhone 编写的媒体查询但是，代码搞砸了。 iPhone load css for iPhone 10，而它是 iPhone，是 8。我认为这与最大屏幕尺寸部分相互重叠有关。有什么好的解决方案来解决这个问题吗？例如。为特定手机使用提取屏幕尺寸？

<!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>test</title>
    <meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
    <style>
    body{
        margin:0px;
        padding:0px;
        background-color:green;
    }
    header{
        height:100vh;
        border-bottom:1px solid black;
    }
    .iphone6,
    .iphone6plus,
    .iphone10{
        display:none;
    }
    /* ----------- iPhone 6, 6S, 7 and 8 ----------- */
    /* Portrait */
    @media only screen 
      and (min-device-width: 375px) 
      and (max-device-width: 667px)
      and (-webkit-min-device-pixel-ratio: 2)
      and (orientation: portrait) { 
        header{
            background-color:red;
            height:calc(100vh - 57px);
        }
        .iphone6,
        .iphone6plus,
        .iphone10{
            display:none;
        }
        .iphone6{
            display:block;
        }
    }
    /* Landscape */
    @media only screen 
      and (min-device-width: 375px) 
      and (max-device-width: 667px) 
      and (-webkit-min-device-pixel-ratio: 2)
      and (orientation: landscape) { 
        header{
            background-color:blue;
            height:calc(100vh);
        }
        .iphone6,
        .iphone6plus,
        .iphone10{
            display:none;
        }
        .iphone6{
            display:block;
        }

    }
    /* ----------- iPhone 6+, 7+ and 8+ ----------- */
    /* Portrait */
    @media only screen 
      and (min-device-width: 414px) 
      and (max-device-width: 736px) 
      and (-webkit-min-device-pixel-ratio: 3)
      and (orientation: portrait) { 
        header{
            background-color:pink;
            height:calc(100vh - 57px);
        }
        .iphone6,
        .iphone6plus,
        .iphone10{
            display:none;
        }
        .iphone6plus{
            display:block;
        }

    }
    /* Landscape */
    @media only screen 
      and (min-device-width: 414px) 
      and (max-device-width: 736px) 
      and (-webkit-min-device-pixel-ratio: 3)
      and (orientation: landscape) { 
        header{
            background-color:orange;
            height:calc(100vh);
        }
        .iphone6,
        .iphone6plus,
        .iphone10{
            display:none;
        }
        .iphone6plus{
            display:block;
        }

    }

    /* ----------- iPhone X ----------- */
    /* Portrait */
    @media only screen 
      and (min-device-width: 375px) 
      and (max-device-width: 812px) 
      and (-webkit-min-device-pixel-ratio: 3)
      and (orientation: portrait) { 
        header{
            background-color:yellow;
            height:calc(100vh - 57px);
        }
        .iphone6,
        .iphone6plus,
        .iphone10{
            display:none;
        }
        .iphone10{
            display:block;
        }

    }

    /* Landscape */
    @media only screen 
      and (min-device-width: 375px) 
      and (max-device-width: 812px) 
      and (-webkit-min-device-pixel-ratio: 3)
      and (orientation: landscape) { 
        header{
            background-color:olive;
            height:calc(100vh);
        }
        .iphone6,
        .iphone6plus,
        .iphone10{
            display:none;
        }
        .iphone10{
            display:block;
        }

    }


    </style>
    </head>

    <body>
    <header class="iphone6">
        iphone 6
    </header>
    <header class="iphone6plus">
        iphone 6 plus
    </header>
    <header class="iphone10">
        iphone 10
    </header>
    </body>
    </html>

Answer 1

iphone 8 和 8+ 的像素比 (device-pixel-ratio) 是 2 和 3，IMO 这就是您遇到该问题的原因。

要了解有关 device-pixel-ratio 的更多信息，以及有关设备的其他信息，请查看下方 link https://www.mydevice.io/#compare-devices

/* iPhone 6+, 6s+, 7+, 8+ --------> 3 */
@media only screen .... (-webkit-min-device-pixel-ratio: 3) .... { }

和

/* iPhone 4, 5, 7, 6, 6s, and 8 --------> 2 */
@media only screen .... (-webkit-min-device-pixel-ratio: 2) .... { }

请根据 device-pixel-ratio 更新您的 css 并查看它是否正常工作，希望对您有所帮助:)

Answer 2

很可能不是完美的解决方案，但它确实有效。我使用了一个媒体查询，其中 min-device-width 和 max-device-width 正是设备宽度，像这样我可以专门针对 iPhone X 并相应地调整样式。

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 375px)
  and (min-device-height: 812px) 
  and (max-device-height: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
    header{
        background-color:yellow;
        height:calc(100vh - 57px);
    }
    .iphone6,
    .iphone6plus,
    .iphone10{
        display:none;
    }
    .iphone10{
        display:block;
    }

}

iPhone 的媒体查询为 iPhone 10 加载 css 而 iPhone 为 8

Media queries for iPhone load css for iPhone 10 while iPhone is 8

css

iphone

mobile-safari

media-queries