Question

我努力在我的网站上找到我的媒体查询。我无法获得区分iphone 6+和三星galaxy s4的有效查询。任何人都能指出我的方向吗？

到目前为止，我的css中有以下三个查询：

iphone 6：

@media only screen and (max-device-width: 667px), only screen and (max-width: 480px),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (    moz-min-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2) {

    .logo {
        **border: 1px solid red;**
        max-width: 60%;
    }
...
...
}

iphone 6 +：

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait),
only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (   min--moz-device-pixel-ratio: 3),
only screen and (    moz-min-device-pixel-ratio: 3),
only screen and (     -o-min-device-pixel-ratio: 3/1),
only screen and (        min-device-pixel-ratio: 3) {

    .logo {
        **border: 1px solid blue;**
        max-width: 60%;
    }
...
...
}

galaxy s4：

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait),
only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (   min--moz-device-pixel-ratio: 3),
only screen and (    moz-min-device-pixel-ratio: 3),
only screen and (     -o-min-device-pixel-ratio: 3/1),
only screen and (        min-device-pixel-ratio: 3) {

    .logo {
        **border: 1px solid green;**
        max-width: 60%;
    }
...
...
}

元标记：

<meta name="viewport" content="width=device-width, initial-scale=1">

iphone 6以设备像素比率2进入查询，但由于iphone 6+和S4的像素比率为3，我需要另一种分离它们的方法，对吗？

这里的问题是我在iphone 6+和galaxy s4上的徽标上看到了绿色边框，但菜单图标和下拉列表中的字体大小差别很大。我知道针对特定设备的不良做法，但到目前为止这是我能得到的最好的，但现在我有点卡住...

无法获得媒体查询以适用于iphone6 +和galaxy S4

0 个答案: