Android版jQuery問題集
やっとhtmlコンテンツをAndroid上に表示できるようになりました。
eclipseから実機のスクリーンショットを取ることができるので便利。
以下はis11tでコンテンツを表示した時のスクリーンショット。
nexus7のスクリーンショットは1920×1200もあるので省略。

viewport関連のメモ
nexus7の実機でviewportの設定(width=320)が効かなくて色々試行錯誤しました。
エミュレータなら問題なく表示されるのですが実機ではダメなのです!
やはり実機を購入しておいて良かったかも。
viewportを有効にする
androidのwebViewはデフォルトではviewportの設定を無視するので
以下の処理を追加する必要があります。
しかし下記を設定しても実機のnexus7ではviewportを設定できません。
—————————————————–
Webview.getSettings().setLoadWithOverviewMode(true);
webview.getSettings().setUseWideViewPort(true);
—————————————————–
→参考:幽霊飛行船さま「WebViewでviewportサイズを指定する」
一部の機種では幅の設定を320以下にできない
色々試行錯誤した結果、viewportが効かないのではなく320px以下の設定を
するとdevice-widthの値に強制的に設定される仕様ということが分かりました。
nexus7のdevice-widthは600px。コンテンツを正しく表示する値は320px
nexus7はミニタブレットのカテゴリなので、最悪の場合、対象から外しても良いかな?
と思ったのですが、以下の記事ではgalaxyS3/noteなども同じ問題があり
また、最近リリースされたスマホの解像度もgalaxy noteと同じなので、同じ問題が
あるかもしれず無視するわけにはいかなくなりました。
→参考:galaxy S3.. viewport meta tag doesn’t work
321なら
上記のサイトを参考にwidthの値を321に設定すれば、nexus7は理想に近くなるのですが
(右端に1pxの隙間ができます)。is11tでは正しく表示されなくなってしまいました。
なのでAndroid2.xでのみviewportを無効にするようにしたらposition:fixedが
効かなくなってフッターが正しく配置されません…。
cssのposition:fixedについて
上記のposition:fixedの問題を調べていたらandroid2.xではposition:fixedを
利用するためにはviewportでuser-scalable=no”を設定する必要がとのことです。
しかしviewportを設定しない場合、上記の記述が無くてもposition:fixedが効きました。
(is11tにて確認)
→参考:iPhone、Android position:fixed 対応状況と対応方法
jQueryで動的に拡大
上記のように「あっちを押せば、こっちが引っ込む」状態になり、どうするか困りました。
結局viewportの設定は一切利用せず、jQuery(javaScript)によってwindowの
幅から拡大率を算出して、動的にコンテンツを拡大するようにしました。
これなら検証できない未知の機種でも。対応できると思いますし。
以下のサイトが参考になりました。
→参考:iPhone / Andoird向けサイト制作のjQuery小技集
画面の向きの固定
viewportではないのですが、画面の向きを固定するのにも少しハマッタのでメモ。
画面の向きを固定するためには以下の設定をAndroidManifestに追加するのですが
—————————————————–
android:screenOrientation=”portrait”
—————————————————–
上記の設定はapplicationタグで行うのではなくactivityタグで行わないと
いけません。