媒体查询在iPhone上不起作用

Question

I have a problem with my RWD for iPhones. It seems that every iPhone ignores my media query tag. Everything works fine on Chrome, Android and Windows Phone, but on iPhones all is in mess. How it's possible?

I have this tag in my head section:

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

Also i tried with

@media only screen
@media min-device-width

And nothing. this is my full code:

@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

So, I figured it out. I created separate style file just for specific iPhones and linked it to the html. Everything works fine.