iPhone 8 时 iPhone 的媒体查询为 iPhone 10 加载 css答案

【问题标题】：Media queries for iPhone load css for iPhone 10 while iPhone is 8iPhone 8 时 iPhone 的媒体查询为 iPhone 10 加载 css
【发布时间】：2019-01-23 18:13:43
【问题描述】：

我有一堆为各种 iPhone 编写的 css 媒体查询，但是代码很混乱。 iPhone 10 的 iPhone 加载 css 虽然是 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>

【问题讨论】：

标签： css iphone media-queries mobile-safari

【解决方案1】：

很可能不是完美的解决方案，但它确实有效。我使用了媒体查询，其中 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;
    }

}

【讨论】：

【解决方案2】：

iphone 8 和 8+ 的像素比 (device-pixel-ratio) 是 2 和 3，IMO 这就是你面临这个问题的原因。

要了解更多关于device-pixel-ratio，以及其他关于设备的信息，请查看下面的链接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，看看它是否正常工作，希望对你有帮助:)

【讨论】：

嗨，看看我上面发布的源代码，我已经按照你的建议正确设置了 -webkit-min-device-pixel-ratio。也许我应该添加特定于设备的附加信息？