响应式网站在iPhone上变白

Question

我正在制作一个响应式网站，可以在个人电脑的不同屏幕上播放。 但我的iPhone媒体查询似乎工作不正常。当我启动网站时显示不正确。当我刷新2件事情可能发生：它变成正确的显示器，或者它将整个页面变成白色。刷新然后保持屏幕白色。

这是我的css媒体查询：

@media only screen and (min-device-width : 320px) and (max-device-width : 480px)
{

    body
    {
        overflow-x:hidden;  
    }

    section#info
    {
        width:90%;
        font-size:350%; 
        height:auto;
        font-family:Futura;
    }

    section#infoMeenemen
    {
        width:90%;
        font-size:350%; 
        height:auto;
        font-family:Futura;
    }

    nav
    {
        min-width:90%;
        top:12.5%;
        margin-left:2.5%;
        font-size:175%; 
        font-family:Futura; 
    }

    div#navigationSection
    {
        min-height:300px;
    }

    div#newsSection
    {
        min-height:430px;
        font-size:175%;
    }

    section#news
    {
        padding-top:6%;
        text-align:center;
        font-family:Futura;
        font-size:1.3em;
    }

    section#food
    {
        text-align:center;
    }   

    #imgLunch
    {
        display:block;
        margin-left:0%;
        min-width:100%;
    }

    #imgHightea
    {
        display:block;
        margin-left:0%;
        min-width:100%;
    }

    #imgLekkers
    {
        display:block;
        margin-left:0%;
        min-width:100%;
    }

    section#food
    {
        font-size:300%; 
        font-family:Futura;
    }

    section#food img
    {
        min-width:80%;
    }

    footer
    {
        font-size:150%;
        height:600px;
    }

    #footerBack
    {
        background-color:black; 
    }

    article#tijden
    {
        margin-left:4%; 
        float:left;
        width:40%;
    }

    article#informatie
    {
        float:left;
        width:40%;  
    }

    article#werken
    {
        width:80%;
    }   

    footer article
    {
        height:auto;
        font-family:Futura;
        color:white;
    }