Android用にメディアクエリ(media query)で表示振り分け
PCサイトでoverflow:scrollによる擬似インラインフレームを使ったページがあったんですが、スマホでうまく表示できない。
調べてみると、そもそもスマホではインラインフレームとoverflow:hiddenを同じものとして扱っていて、さらにiPhoneとAndroidでその扱いにも差があることがわかりました。
インラインフレーム、overflow:hiddenの扱い
iPhoneの場合
表示はする
スクロールは2本指でスクロール
Androidの場合
表示はする
スクロールは出来ない
iPhoneの「2本指スクロール」というのもかなりマニアックな操作方法というか、未だに知らない人も多いかと思われます。
Androidはそもそもスクロールできないとのことなので、使わないほうが無難ですね。
しかしPCサイトではoverflowスクロールをどうしてもさせたい、という要求があることもあります。
そんなときは、CSS3のメディアクエリで動作を分けて対応しましょう。
メディアクエリでスマホ用に表示変更
というわけで用意したのがこんなCSS
#scroll-box{ height:500px; overflow:auto; } @media screen and (max-device-width: 320px) { #scroll-box { height: auto; overflow: visible; } } |
最初の指定をPCで読み込み、次の指定は横幅が320px以下の環境で見た時だけ適用されます。
これで安心、と思いきや「Androidに適用されていない」という現象が。
確認のために、JavaScriptで画面幅をみてみると…
<script> document.write(screen.width); </script> |
手持ちのAndroid機は「902px」でした。道理で作動しないわけです。
広告
というわけで対応幅をぐっと広げて
@media screen and (max-device-width: 1025px) { #scroll-box { height: auto; overflow: visible; } } |
にしました。
1025pxは、iPadの横表示時のサイズです。
この幅だと小さめのノートPCの時にも引っかかりますのでご注意を。
今回の場合は表示よりも動作優先なので、これで行きます。