html - 媒体查询不起作用

Question

我的样式表底部有以下基本媒体查询模板，如下所示

@media (max-width: 1599px) {
    body {
    background: #000;
    color: #FFF;
    font-size: 10pt;
}
}
@media (max-width: 1069px) {
    body {
    background: #000;
    color: #FFF;
    font-size: 10pt;
}
}
@media (max-width: 999px) {
body {
    background: #000;
    color: #FFF;
    font-size: 10pt;
}

@media (max-width: 767px) {
body {
    background: #000;
    color: #FFF;
    font-size: 10pt;
}
}
@media (max-width: 643px) {
body {
    background: #000;
    color: #FFF;
    font-size: 10pt;
}
}

/* Mobile devices */
@media (max-width: 359px) {
body {
    background: #000;
    color: #FFF;
    font-size: 10pt;
}
}

但是，当在 iOS7 上的 iPhone 5 上查看时，布局没有改变，现在有人知道为什么吗？我的标题等中需要一些东西吗？

多谢你们！

Answer 1

使用这样的东西。最好指定样式表的用途。即屏幕、打印等。如果你愿意，你也可以在这里通过像素密度。

body {
    background: #111;
    color: #EEE;
    font-size: 12px;
}

@media only screen  
and (max-width : 1599px) {
    html body {
        background: #000;
        color: #FFF;
        font-size: 10px;
    }
}