確定是否iPhone Safari瀏覽器是垂直視模式CSS

Question

我一直在使用

@media screen and (max-width: 480px) 

，以確定如果用於觀看的設備是iPhone，但是，看來這個規則適用於垂直和水平視口模式。

如何確定視口是否確實是垂直的（即較小寬度的視口）？我已經嘗試

@media screen and (max-width: 320px) 

但它似乎並沒有註冊。

此外，位於(max-width: 480px)限制下的所有樣式也適用於垂直模式。

Answer 1

可以使用orintation媒體查詢：

/* Portrait */ 
@media screen and (orientation:portrait) { 
    /* Portrait styles */ 
} 
/* Landscape */ 
@media screen and (orientation:landscape) { 
    /* Landscape styles */ 
} 

Answer 2

我覺得有一個選項「方向」，媒體的查詢;）

http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/

Answer 3

我知道你想做到這一點CSS，但CSS真的不是檢測iPhone的方式......你應該使用JavaScript。

，這將幫助您檢測在JavaScript中定位：

function detectOrientation() { 
if (orientation == 0) { 
document.className = 'portrait'; 
} 
else if (orientation == 90) { 
document.className = 'landscape'; 
} 
else if (orientation == -90) { 
document.className = 'landscape'; 
} 
else if (orientation == 180) { 
document.className = 'portrait'; 
} 
}