zuntan02のはてなブログ

備忘録的なものです。時々職場の技術者ブログにも転記してますが、メインはこちらで。

Android4.4のviewportで"width=device-width"としているときの挙動が怪しい件

AndroidOSのアップデート後、同じスマホで、同じサイトを閲覧しているのに、いつも画面が拡大表示される様になった。
ピンチインすれば収まるんだけど、カッコ悪い。

調べたところ、viewportのdevice-widthについて、返す値が変わっている模様。
例)

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

→以前は1080って返してきてたのが、540、って返す様になっていた。
(参考)
 http://d.hatena.ne.jp/scientre/20130225/device_width_on_android_4
 Android 4 に存在する device-width/height のバグ

上記バグが「直った」結果として、デバイス幅(Nexus7(2013)なら1200px)
じゃなくて、ブラウザ幅(同600px)を返す様になった、ということではないかと推測。
(今の所これに該当する記事はないんだけど、動きはそんな感じだ)
Android4.3から4.4にアップデートした端末で起き始めている模様。

UAによる適用切り分けも考えたけど、サイトの仕組み上OSのアップデートによる違いは
吸収できない(しづらい)ので、生成後にJavascriptで画面サイズを取ってきて、
device-widthをブラウザ幅で上書きする様にしました。

例)

<script language="JavaScript">
<!--
function resize(){
      var w = document.documentElement.clientWidth;
      var h = document.documentElement.clientHeight;
      if (w > h) w = h;           // 横持対応:狭い方を基準
      document.body.style.width = w + "px";
}
-->
</script>
(中略)
<body onLoad="resize()">

http://www.openspc2.org/reibun/JS_TipsAndTricks/text/012/ を参考としました。