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

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

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

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