Question

实时链接here

我还看到了其他一些问题，但它们都是从2012年开始的，我觉得它有点过时了2015年的手机标准。

对于xx-high res显示器，例如较新的三星Galaxy，LG和Nexus手机，-webkit-device-ratios为3或4，（here的数据）我的{{1}标头类型与<h3>类型重叠。我尝试使用以下CSS来定位它，以减少字体大小或边距以允许空间，但它不会触发。

下面是一些尝试减少字体大小和更改颜色的示例，只是为了查看媒体查询是否触发。

我试过了两个：

<p>

和

        @media
    only screen and (-webkit-min-device-pixel-ratio: 3), 
    only screen and (-moz-min-device-pixel-ratio: 3), 
    only screen and (min-device-pixel-ratio: 3) {
        h1, h2, h3, h4, h5, #Product-Container p, #Recycling-Container p, #FAQ-Container p, #FAQ-Container p span, #Safety-Container p, {
            font-size: .5em !important;
            color: red !important;
        }

}

但Android和iOS设备都没有接受此代码。我在iPhone 6上测试了该网站，它显示正常。我猜测是因为大多数iPhone上的设备像素比率仅为2。

截至2015年，此代码是否可能在CSS3中不再有效，就像2012 - 2014年一样？或者我有什么遗失的东西？

这里也是我的元标记：

@media screen and (min-resolution: 192dpi) {
    h1, h2, h3, h4, h5, #Product-Container p, #Recycling-Container p, #FAQ-Container p, #FAQ-Container p span, #Safety-Container p, {
        font-size: .5em !important;
        color: red !important;
    }

}

有什么建议吗？

-webkit-min-device-ratio和min-resolution不工作

0 个答案: