0

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

编辑 如果我将最大宽度更改为像 3000 像素这样荒谬的东西，样式就会很好地应用..

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

@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;
}   

}

有人有什么想法吗？

4

1 回答 1

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;
            }
}
于 2013-11-06T18:39:09.593 回答