cssメディアの風景とポートレート

Question

なぜ私はその下のCSSメディアを追加し、ピクセルエフェクトは2つの設定のnexus 5では同じではありません。それは3分の2のようだ。 （肖像画では60pxのサイズは横長で40pxと思われます）。

私はどのような概念を知っていますか？

@media only screen and (max-device-width: 768px)and (orientation:portrait)

@media only screen and (max-device-width: 768px)and (orientation:landscape)

が更新を（私は実際には非常に混乱）QUESTION

https://jsfiddle.net/Lgvpszrt/2/

は、高さとテキストサイズは画像に同じではありません。

// ---------------------------

私はhttps://jsfiddle.net/Lgvpszrt/3/にコードを修正した後、それはですワーキング。

しかし、私はその概念を知らない。

Answer 1

画素密度の違いによる可能性があります。 Mozilaのこの記事を見て、モバイル上のビューポートとピクセルについてより深く理解してください。

https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

Answer 2

メタビューポートタグの構文と@mediaルールを組み合わせている可能性があります。このようなものを試してみてください。 https://jsfiddle.net/sheriffderek/rLnL27e4/

body { 
    background: red; 
} 

@media (orientation: portrait) { 
    body { 
    background: orange; 
    } 
} 

@media (orientation: landscape) { 
    body { 
    background: green; 
    } 
} 

@media (min-width: 700px) and (orientation: portrait) { 
    body { 
    background: pink; 
    } 
} 

@media (min-width: 700px) and (orientation: landscape) { 
    body { 
    background: lime; 
    } 
}