Android2.3 webviewにおけるiframeの扱い
やりたかったこと
- webviewの中で、webviewの換算幅を超えるiframeを表示したい
- 横スクロールバーは出したくない (画面に収めたい)
iframeの仕様
- 使える
- 但しスクロールバーはどうやっても表示されない
- dom attrのwidth,heightを指定しても中身のサイズに置き換わる
- cssの width, heightを指定しても中身のサイズに置き換わる
- cssの zoom属性は無視
- 親要素のhtml, bodyにzoomを指定しているとiframeだけ元のサイズで表示される
- cssのtransform-scaleも無視
ってことで、iframeの中身より狭いwebviewでiframeを表示しようとすると、どうしても画面に収まらない
objectタグを使おう
(function(){ var ratio = window.innerWidth / 320; document.write('<object type="text/html" id="gameFrame" data="hogehoge" style="background-color:white;-webkit-transform:scale('+ratio+');-webkit-transform-origin: 0 0;"></object>'); })();
objectタグならtransform-scaleが効く
viewport
ちなみにandroidではviewportでwidth=320みたいなことはできない
<!-- これは効かない --> <meta name="viewport" id="viewport" content="user-scalable=no; width=320">
viewportっぽいことを実現するためにはbody全体にzoomをかければ良いのだが、bodyタグの後ろにzoomをかける処理を書くとダメらしい。といって、headタグの中ではまだbodyが描画されてないのでstyleが指定されない
headタグの中で対処するためには
(function(){ var ratio = window.innerWidth / 320; if(document.getElementsByTagName('body').length == 0)document.write('<body>'); document.body.style["zoom"] = ratio; })();
bodyタグがないのでdocument.writeでダミーのbodyタグを増やす。vaildではない。
この仕様も相まって時間がかかってしまった。