使用@media自动将内容调整为屏幕大小

Question

我正在尝试让我的网站自动将其内容调整为屏幕大小，因此，如果我从iPhone或类似网站进入网站，布局应该更改。

@media (max-width: 600px) {
    .logo {
        font-size: 30px;
        text-align: center;
    }
    .nav {
        text-align: center;
        font-size: 35px;
    }
}

当我在计算机上输入谷歌浏览器页面时，内容会随着我缩小镀铬窗口而改变，但是当我从iPhone 5输入时，页面会根据此更改内容：

@media (min-width: 800px) {
    .nav {
        text-align: right;
        margin-top: -30px;
        margin-right: 20px;
    }
    .logo {
        padding-top: 17px;  
        padding-bottom: 0;
    }  
}

我是否使用@media错误或为什么当我从iPhone输入时，页面调整为我的第一段代码？

Answer 1

<强> CSS 尝试使用设备宽度

@media only screen  
and (min-device-width : 800px) 
{

  .nav {
    text-align: right;
    margin-top: -30px;
    margin-right: 20px;
    }
.logo {
    padding-top: 17px;  
    padding-bottom: 0;
}  
}