[Web] OpenStreetMapのOpenLayersを使って図形を描画してみる の記事で「OpenStreetMap」を扱いましたが、
これをAndroid端末でも表示したいときは、「WebView」を使うことにしました。
実装するにあたって色々ハマったので備忘メモ。
(1) ブラウザ(WebView)の解像度をスマホ用に設定する
はじめに、Android端末でHTMLを表示するときのおまじまい。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
↑を<head>タグ内に記述すると、ブラウザはスマホ(Android/iPhone)用の解像度で表示してくれるそうです。
※iPhoneは未確認
(2) 解像度を設定してみる
前回の記事でOpenStreetMapを表示するタグを確認します。
<div id="canvas" style="width:320px; height:480px"></div>
結構多くの端末ではこれで大丈夫そうです。
うっかり、端末のディスプレイ解像度(480x800等)を設定してしまうと、
画面からはみ出すくらい大きく表示されてしまうので注意が必要です。
詳しくは下記のサイトを参照。
Androidサイトは横幅何pxで作ればいいのか？
http://d.hatena.ne.jp/acidgraphix/20110126/1296018143
(3) 色々な端末でもフルスクリーン表示がしたい
ということで、上記のstyle属性で、width,heightともに100%にしてみました。
結果↓
・PC用ブラウザ --> OK
・WebView --> widthのみ反映された(スライダー幅分が間引かれる)
スタイルシートで設定できないか頑張ってみたのですが、どうしてもheightの設定がうまくいきませんでした。
そこで、style属性をJavascriptで書き換えてみることにしました。
----------------------------------------------------------
// ブラウザの解像度に合わせて、OpenStreetMapのサイズを変更
document.getElementById("canvas").style.width = document.documentElement.clientWidth + 'px';
document.getElementById("canvas").style.height = document.documentElement.clientHeight + 'px';
※横幅についてはスライダー分が間引かれるので、上記にいくらかピクセルを足してスペースを埋める必要がある
----------------------------------------------------------
これで、ブラウザの解像度が異なる端末でもフルスクリーン表示ができました。
確認した端末↓
・HTC Desire
・Galaxy S2
・SonyTablet
(4) なぜpx単位で設定する方法を選択したのか
広告を貼るスペースを確保するためです。
(3)のJavascriptのところで広告用のスペースを確保して、それで出来たスペースに広告を貼ります。
ちなみに、「%」でサイズ設定をしてしまうと、微妙な空白ができたり意図した調整ができませんでした。
Web広告ということで、オーバーレイ広告を使うという選択肢もあるのですが、
オーバーレイ広告を扱っていないところもあるので、インライン広告を貼ることができる
今回の方法を選択しました。
まとめると短いけど、結構時間がかかりました。
まだまだ知らないことばかりです。
2012年04月28日
[Android + Web] WebViewいっぱいにOpenStreetMapを表示したい(広告も表示したい)
posted by be-style at 02:01| Comment(0)
| Android
この記事へのコメント
コメントを書く
