記事で「OpenStreetMap」を扱いましたが、これをAndroid端末でも表示したいときは、「WebView」を使うことにしました。実装するにあたって色々ハマったので備忘メモ。ブラウザ(WebView)の解像度をスマホ用に設定するはじめに、Android端末でHTMLを表示するときのおまじまい。content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">↑を<head>タグ内に記述すると、ブラウザはスマホ(Android/iPhone)用の解像度で表示してくれるそうです。解像度を設定してみる前回の記事でOpenStreetMapを表示するタグを確認します。height:480px"></div>結構多くの端末ではこれで大丈夫そうです。画面からはみ出すくらい大きく表示されてしまうので注意が必要です。詳しくは下記のサイトを参照。色々な端末でもフルスクリーン表示がしたいということで、上記のstyle属性で、width,heightともに100%にしてみました。widthのみ反映された(スライダー幅分が間引かれる)スタイルシートで設定できないか頑張ってみたのですが、どうしてもheightの設定がうまくいきませんでした。そこで、style属性をJavascriptで書き換えてみることにしました。'px';※横幅についてはスライダー分が間引かれるので、上記にいくらかピクセルを足してスペースを埋める必要がある----------------------------------------------------------これで、ブラウザの解像度が異なる端末でもフルスクリーン表示ができました。px単位で設定する方法を選択したのか広告を貼るスペースを確保するためです。(3)のJavascriptのところで広告用のスペースを確保して、それで出来たスペースに広告を貼ります。ちなみに、「%」でサイズ設定をしてしまうと、微妙な空白ができたり意図した調整ができませんでした。Web広告ということで、オーバーレイ広告を使うという選択肢もあるのですが、オーバーレイ広告を扱っていないところもあるので、インライン広告を貼ることができる今回の方法を選択しました。まとめると短いけど、結構時間がかかりました。知らないことばかりです。[必須入力]このブログについてものづくりに関することを色々と。ウィジェット過去ログ2019年07月(1)2019年02月(3)2018年12月(1)2018年04月(1)2018年03月(1)2018年02月(1)2017年11月(3)2017年04月(4)2017年03月(7)2017年02月(1)2016年11月(1)2016年09月(1)2016年08月(3)2016年07月(1)2016年05月(1)2016年04月(1)2016年02月(4)2016年01月(1)2015年11月(1)2015年06月(1)検索ボックス。