BLOGサブスレッドの日常

2017.05.09

iPad にて縦横で適用するCSSを切り替える

chao

はじめに

しみずです。どうぞよろしく。

今回は小ネタです。
スマホで見る用のWebページを縦横でレイアウトを変えたいことがありました。
やり方を調べていると、いくつかの方法がヒットしましたが、
縦横で適用するCSSを切り替えるという方法がシンプルで良さそうでしたので、
それを使うことにしました。

確認環境

iOS8, iOS10 の iPad
UIWebView 内で表示されるHTML

やり方

例えば、画像を表示するとして
縦の場合は横幅いっぱい。横の場合は横幅は半分。
という事をしたいと思います。

まずはHTMLを書きましょう。
ヘッダは省略します。

<body>
    <div align="center">
        <img class="top" src="img/sample.png">
    </div>
</body>

このように、対象の画像を表示するためのimgタグにはクラスを指定しておきます。
今回は sample というクラスにしました。

この sample クラスに対して、縦と横で異なるスタイルを適用するためのCSSを書きます。
縦のときは横幅いっぱい(100%)
横のときは横幅半分(50%) とします。

@media screen and (orientation: portrait) {
   /* 縦向きの場合のスタイル */
   img.sample { width: 100%; height: auto; }
}
@media screen and (orientation: landscape) {
    /* 横向きの場合のスタイル */
    img.sample { width: 50%; height: auto; }
}

このCSSを使うことで、sample クラスが設定されている img タグの画像は
縦のときは横幅いっぱいで表示され
横のときは横幅半分で表示されるようになります。

おわりに

iOSやAndroidアプリであれば、縦横で違う定義ファイルやレイアウトファイルを読み込むようにすれば何とかなりますが
サイト側だけで解決しようとすると、知らない事が多いので、ここにたどり着くまでに結構悩んでしまいました。
iPadアプリ内 UIWebView でしか確認していませんが、恐らく通常のブラウザでも動くのではないかと思います。

この記事を書いた人

chao