android:viewport

Android版jQuery問題集

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

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タグで行わないと
いけません。
 

 
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


+ 2 = 十


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>