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の時にも引っかかりますのでご注意を。
今回の場合は表示よりも動作優先なので、これで行きます。