媒体查询在 iPhone 上不起作用

Question

我的 iPhone RWD 有问题。似乎每个 iPhone 都忽略了我的媒体查询标签。在 Chrome、Android 和 Windows Phone 上一切正常，但在 iPhone 上一切都一团糟。怎么可能？

我的头部有这个标签：

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

我也试过了

@media only screen
@media min-device-width

什么都没有。这是我的完整代码：

@media screen and (min-width: 220px) and (max-width: 480px)
{

    html
    {
        height: 100%;
    }

    #header .saturn
    {
        width: 100%;

        margin-top: 35px;

        display: block;
        text-align: center;

        animation: rwdScaleSaturn 2s linear infinite;
        -webkit-animation: rwdScaleSaturn 2s linear infinite;
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
    }

    #header .header-nav
    {
        margin: 0;

        display: block;
        text-align: center;
        float: none;
    }

    #header .header-nav ul
    {
        width: 100%;
        text-align: center;
    }

    #about .cloud.x1
    {
        display: none;
    }

    #about .cloud.x2
    {
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
    }

    #about .cloud.x3
    {
        display: none;
    }

    #about .cloud.x4
    {
        display: none;
    }

    #about .cloud.x5
    {
        display: none;
    }

    #about .cloud.x7
    {
        right: 35%;
        top: 10%;

        animation: rwdAnimation 2s linear infinite;
        -webkit-animation: rwdAnimation 2s linear infinite;
    }

    #about .rocket
    {
        transform: scale(0.8);
        -webkit-transform: scale(0.8);

        margin-bottom: 15px;
        left: 80px;
        bottom: 50px;
    }

    #about .about-description
    {
        margin: 0;
        font-size: 12px;

    }

    #about .plane
    {
        display: none;
    }

    #about .ship
    {
        bottom: 60px;
        margin-left: 15px;
    }

    #portfolio
    {
        min-height: 400px;
    }

    #portfolio .title
    {
        padding-top: 15px;
        margin-bottom: 20px;
    }

    #contact .contact-description
    {
        font-size: 14px;
        margin-bottom: 25px;
    }

    #contact .mail
    {
        margin-bottom: 10px;
    }

    #contact .shark
    {
        transform: scale(0.8);
    }

}

Answer 1

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

@media only screen and (min-width: 220px) and (max-width: 480px){
    body{
        background:red;
    }
}

Answer 2

所以，我想通了。我为特定的 iPhone 创建了单独的样式文件并将其链接到 html。一切正常。