Question

我遇到媒体查询最奇怪的问题。在我的桌面浏览器中，它们在调整大小时工作正常。当我在iPhone（5C）上测试时，媒体查询被完全忽略。

修改如果我将max-width更改为像3000px这样荒谬的东西，那么样式应用得很好..

媒体查询是我样式表中的最后一项，fyi。这是媒体查询特定块：

@media only screen and (max-width:930px){
html{ font-size:46.875%; }
.arrowdown, .arrowup{ border-width:20px;}
#about .abouttext{
    width:90%;
    font-size: 1.8rem;
    line-height:2.7rem;
    padding-bottom:40px;
}
#quotebox{background-color:green;}
#quotebox h3{ width:65%; }
#quotebox div{ width:40%;}
#contact ul li{
    font-size:1.6rem;
    width:90%;
}
.socialbox img{ opacity:1; }
.socialbox a{ margin: 0 20px;}

.hint:hover:before, .hint:hover:after, .hint:focus:before, .hint:focus:after, [data-hint]:hover:before, [data-hint]:hover:after, [data-hint]:focus:before, [data-hint]:focus:after {
    visibility: hidden;
    opacity:0;
}
.hint:after, [data-hint]:after {
    content: "-";
    width:0;
    height:0;
}   

}

有人有任何想法吗？

Answer 1

尝试在媒体查询中添加：max-device-width以及以下HTML代码片段：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no">

因此，您的媒体查询应如下所示：

@media only screen and (max-width: 930px), only screen and (max-device-width: 930px){
    html{ font-size:46.875%; }
    .arrowdown, .arrowup{ border-width:20px;}
    #about .abouttext {
            width:90%;
            font-size: 1.8rem;
            line-height:2.7rem;
            padding-bottom:40px;
            }
}

媒体查询问题

1 个答案: