CSS媒體查詢不適用於iPhone

我遇到了我的css媒體查詢問題。他們在電腦上工作很好，但不適合我的iPhone。這是我有：CSS媒體查詢不適用於iPhone

@media only screen and (max-width: 400px) { 
    .logInCenter{ 
     width:90%; 
     left:0; 
     top:0; 
     margin-left:0px !important; 
    } 
} 

@media only screen and (min-width: 401px) and (max-width: 768px) { 

    .fluid-half 
    { 
     display:block; 
     padding:20px 0px; 
     width:100%; 
     float:none; 
    } 

} 

@media only screen and (min-width: 769px) and (max-width: 991px) { 

} 

@media only screen and (min-width: 992px) and (max-width: 1199px) { 

} 

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

}

問題是，我的iPhone只檢測到樣式時，我把它們放在第三個媒體查詢。問題是，在100％的寬度，它看起來就像任何其他的桌面網站。真的很遠。我希望這是有道理的！謝謝！

來源

2013-10-12 sethcarlton

你確定下面的代碼在你的HTMl頭部嗎？告訴設計師查看視口大小。

<meta name="viewport" content="width=device-width">

來源

2013-11-06 10:51:25

我完全忘了他的。感謝提醒，它的作品！ – sethcarlton

這個答案值得在搜索中更多upvotes和突出。我也缺少'viewport'元標記，希望我早點找到答案！ – veeTrain

由於您使用的是CSS媒體查詢，因此您不應在HTML文件中使用元標記。你可以設置相同的CSS在使用：

@viewport { 
    width: device-width; 
    zoom:1; 
}

來源

2015-06-30 10:03:46 samtamtam

CSS媒體查詢不適用於iPhone

回答

相關問題