查詢在縱向所有的智能手機

-1

什麼即時試圖實現的是一個媒體查詢，將只工作在所有的智能手機上的肖像orentation查詢在縱向所有的智能手機

我用至今這一個，但它不是在iPhone 5的工作。爲什麼是這樣？

@media only screen and (max-width:800px) and (orientation: portrait){ 
    aside{ display: none;} 
}

嘗試::（最大寬度：568px） – 2013-03-19 11:34:32

iPhone 5顯示分辨率爲1136 x 640像素。對角線尺寸爲4英寸，新型觸摸屏的寬高比爲16：9，並標有Retina顯示屏，每英寸像素爲326 ppi。

嘗試：

@media only screen and (min-width: 560px) and (max-device-width: 1136px) { 
    aside{ display: none;} 
}

2013-03-19 11:34:54 Smartis

它不工作:( – 2013-03-19 11:46:53

查看本頁面：http://www.screenresolution.org/ – Smartis 2013-03-19 11:53:45

您是否使用了真正的iPhone或模擬器？ – Smartis 2013-03-19 11:54:22

所有手機屏幕縱向：

在CSS：縱向

@media only screen and (max-device-aspect-ratio: 1) and (orientation: portrait) { 
    aside{ display: none;} 
}

小的手機屏幕有明確設置視口寬度：

在HTML <head>

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

聲明此縮放模式在CSS：

@media only screen and (max-width: 479px) and (max-device-aspect-ratio: 1) and (orientation: portrait) { 
    aside{ display: none;} 
}

人像所有的手機屏幕採用默認視口寬度（980px）：

注：這已經成爲標準在現代網頁設計中練習來定義視口寬度，而不是將其保留在默認的980像素。它是Responsive Design的組成部分。我強烈建議花一些時間來了解它。

在CSS：

@media only screen and (width: 980px) and (max-device-aspect-ratio: 1) and (orientation: portrait) { 
    aside{ display: none;} 
}

2013-03-19 12:14:17

添加meta標籤使得我的網頁在iPhone5上看起來很奇怪。它只是填充屏幕寬度的一半 – 2013-03-19 13:40:06

我更新了元視口標記以包含初始縮放比例，也許這會使它看起來不錯。否則，我在下面添加了另一個解決方案，您可能會滿意 – 2013-03-19 14:30:19

回答