スマホの回転を考慮した画面開発について

html

スマホ用のWebページの開発の話。

やりたかったことは画面の中央に画像や動画を表示したかった。
端末の向きによって表示する領域を変えたい。

端末が縦向き・・・画面の幅一杯に画像を表示したい
端末が横向き・・・画像の横幅を端末の1/2にして中央に寄せたい

試行錯誤したけど以下の方針が良いと思った。
・できる限りCSSで対応
・どうしてもCSSで対応できない部分はJavascriptで対応

CSSで対応

<style type="text/css">
/* 端末縦向き */
@media only screen and (orientation:portrait) {
  ・・・
}

/* 端末横向き */
@media only screen and (orientation:landscape) {
  ・・・
}
</style>

Javascriptで対応

<script>
var trigger;
var ua = window.navigator.userAgent.toLowerCase();

// iOS判定
if (ua.indexOf("iphone") != -1 || ua.indexOf("ipad") != -1 || ua.indexOf("ipod") != -1) {
  // Crhome or Firefox判定
  if (ua.indexOf("crios") != -1 || ua.indexOf("fxios") != -1) {
    trigger = "resize";
  } else {
    trigger = "orientationchange";
  }
// Android判定
} else if (ua.indexOf("android")) {
  trigger = "resize";
}
window.addEventListener(trigger, function() {
  // iPhone Chrome/Firefoxで
  // resizeのタイミングで画面サイズが正しく取得できないので遅延で取得した
  setTimeout(function() {
    window.innerWidth; // => 画面幅
    window.innerHeight; // => 画面高さ
    // DOM操作・・・
  }, 200);
});
</script>

iPhone ChromeとFirefoxでどのタイミングで取得するのが適当なのだろうか・・・
いまいちよくわからなかった。ただ遅延して取得すると意図した数字が取得できたけど何とも嘘くさい・・・

結論・・・CSSで全部できたらそれが1番安全だよねって話

以上です