iOS端末でディスプレイの幅を取得する際の注意

EatSmartでは「もぐナビ」という食品クチコミサイトを運営しています。

今回はそのスマートフォン版サイトで発生した問題とその解決に関してです。

「ページの右に隙間が出来ている」

先日こんな指摘を受けました。普段から動作確認に利用しているiOS端末では再現しませんが、iPhone5sでは確かに右端に隙間ができていました。

経験上、これが発生するのはコンテンツの幅がディスプレイの幅より大きい場合です。

ページを見てみると、どうやら横幅336pxの広告が表示されているようです。

該当箇所を確認すると

もぐナビのスマートフォンサイトでは、ディスプレイの幅に合わせて横幅が300pxか336pxの広告を表示しています。

該当の箇所ではjQueryなどのライブラリを利用せず、以下のようなコードでディスプレイの幅を取得して広告を表示していました。

if (window.innerWidth > 320) {
// 横幅336pxの広告を表示
} else {
// 横幅320pxの広告表示
}

iPhone5sでは当然320が返り320pxの広告が表示されると思っていたのですが、実際にiOS9にアップデートしたiPhone5sで実行してみると、980が返っていました。

このことから、ディスプレイの幅が320pxにもかかわらず、横幅336pxの広告が表示されていることが確認できました。

正しいディスプレイの幅を取得するには

スマートフォンのサイトでは特にページの読み込み速度に注意を払っています。

jQueryなど便利なライブラリは沢山ありますが、ちょっとしたDOMの操作なら素のJavaScriptで処理したほうが良いと考えています。

今回のようにディスプレイの幅を取得するだけなら、以下のようにscreenから取得する方法を取りました。

if (screen.width > 320) {
// 横幅336pxの広告を表示
} else {
// 横幅320pxの広告表示
}

さいごに

今回は幸い実機が手に入ったので再現することが出来ましたが、スマートフォンはOSやバージョン毎に細かな挙動の違いがあります。

 PCブラウザやシミュレータだけでの確認ではなく、複数の実機で確認することの重要性を再確認しました。