ぜんぶなんとかなる

ふしみの雑文

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ではない。

この仕様も相まって時間がかかってしまった。