CSS3のmedia queryを使ったデバイスの方向確認、振り分け

PSのブラウザ(基本は横長)、スマートフォンのブラウザ(基本は縦長)に合わせてデザインを振り分けるための方法の一つとして、CSS3のmedia queryがあります。Javascriptを使わず、ブラウザが横長か縦長か判別し、振り分けます。PCのブラウザでも、横サイズを縮めていき縦長になると、結果が変わります。
各ブラウザの比較的新しいバージョンは、ほぼ対応しています(IEは9のみ)。

@media screen and (orientation: portrait) で縦長か、@media screen and (orientation: landscape)で横長かをそれぞれ判別して、結果をdisplay: inlineとdisplay: none;に振り分けるかたちで表示しています。

画面の縦横比率から縦長横長のどちらかを表示します。
グレーの文字で[ 縦長横長 ]と表示されたら、ブラウザが対応していません。

現在のブラウザの画面は、[ 縦長横長 ]です。