2015.06.30

ブラウザ表示領域のサイズを取得する

jQueryを使って横幅を取得して、レスポンシブでPCサイトとスマホサイトで表示を切り替えるため、
スライダーやライトボックスなどの挙動を変える際に少しハマったので書く。

$(window).width(); 表示領域の横幅を取得。
PCの場合はウィンドウのサイズによって変わる。
スマホでは縦・横にすると値はそれぞれ変わる。

PCのFirefox、Chrome、IEでは問題が無かった。
スマホ、iPhoneのSafariでもAndroidの標準ブラウザ、Chromeでも問題なく取得できた。
しかし、AndroidのFirefoxでのみ横幅として取得した値が明らかに大きく、
逆に縦幅として取得した値が300代となっていて、横と縦が逆転している。

端末によってはブラウザサイズの高さが、画面解像度の影響で大きくなっているものもあるので、
そういった端末で見ると、PC用に記述したスクリプトが表示されてしまうのだ。

ただ、スマホでのFirefoxのシェア割合は0.5%程度ととても低い。(『Chromeの成長続く – 5月ブラウザシェア(モバイル)』 マイナビニュース
これがサイトの表示にどう響いてくるかは、レスポンシブで記述したスクリプトによるが、
大抵の場合はサイトを見ていて不快なほど表示がおかしくなるわけではないと思うので、
$(window).width() で取得しても問題ないかと。