0

私は使用しています

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

表示に使用されているデバイスが iPhone であるかどうかを判断するには、この規則が縦方向と横方向のビューポート モードの両方に適用されるようです。

ビューポートが実際に垂直かどうか (つまり、ビューポートの幅が狭いかどうか) を判断するにはどうすればよいですか? 私が試してみました

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

しかし、それはまったく登録されていないようです。

また、(max-width: 480px)制限の下にあるすべてのスタイルも垂直モードに適用されます。

4

3 に答える 3

3

orintation メディア クエリを使用できます。

/* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
}
于 2012-07-04T13:43:33.577 に答える
0

メディアクエリには「向き」というオプションがあると思います;）

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

于 2012-07-04T13:44:31.190 に答える
0

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'; 
}
}
于 2012-07-04T13:46:42.397 に答える