NO IMAGE

Androidでの表示を改善

20120911_1iPhone,iPod系は横幅320px表示
(実際のディスプレイ表示能力は倍の解像度640px)

Android系は横幅360px表示
(実際のディスプレイ表示能力は倍の解像度720px)

iPod touchでページが収まればOKと考えていたため、Android系スマートフォンで表示すると右側に40px分の余白が・・・。

また、サイト内検索のテキストボックスが大きすぎて、診療時間、医院案内の下部に・・・。



20120911_2メディアクエリで横幅360pxの時の、CSSの記述を追加しました。

また、サイト内検索も、画像(背景枠と虫メガネ)を用意し、CSSを変更して小さくし、1行に収めました。

これまでは、スマートフォン版Firefoxだと、テキストボックスが長~くなって画面からハミ出していたのですが、この修正版では問題ないようです。

Chromeでも確認したかったのですが、Android版は存在しないようです。
iPodにChromeを入れて確認した分には問題ないようです。



20120911_3更に閲覧性を高めるために、トップページ読み込み完了後に、アドレスバーを隠すようにしました。

以下の記述をHTMLに追加して、1pxだけ縦スクロール。


<script>
if (navigator.userAgent.indexOf(‘iPhone’) > 0 || navigator.userAgent.indexOf(‘iPad’) > 0 || navigator.userAgent.indexOf(‘iPod’) > 0 || navigator.userAgent.indexOf(‘Android’) > 0) {
//スマートフォン時に実行
setTimeout(“scrollTo(0,1)”,100);
}
</script>


・・・少しはマシになったかも。^^

PS:
ドコモさんによるとSH-01DのAndroid4.0へのバージョンアップは明日(9/12)のようです。
随分待たされた感がありますが、少し様子を見てからの方が良いかも・・・。

私の記憶が確かなら、4から(実は3から)はSVGが表示できるようになるはず。
他に4にすると何かイイ事があるのか???