viewportのエミュレーション Cordova(PhoneGap)
viewportとは、仮想のブラウザウィンドウです。
CSSやJavaScriptが描画エリアとして参照しているのは、viewportです。
viewportの横幅は、デフォルトで980pxに設定されています。
では、端末の解像度が640px(width)の場合、viewportの右端の画像は切り除かれてしまうのでしょうか?
いいえ、その様なことはありません。
viewportを基準としてレイアウされた画像は、端末の解像度に合わせて、自動的に拡大縮小されるのです。
つまり、解像度の異なるどんな端末に対しても、viewportだけを意識していれば、イメージした通りに表示させることができるのです。
ところが、残念なことに、この仕組みが適用されるのは、iPhoneのiOSだけなのです。
androidでは、この仕組みがうまく適用されないのです。
しかも、androidは、iPhoneとは異なり、ベンダー毎に解像度やピクセル濃度(dpi)の異なる多種多様な端末が発売されています。
一体どのように、レイアウトの同一性を実現したら良いのでしょうか?
そこで登場するのが、viewportのエミュレーションです。
前置きが長くなりましたが、今回は、このviewportのエミュレーションについて、まとめてみました。
①viewportを端末の解像度、ピクセル濃度(dpi)に合わせることで、viewport = 端末画面 の関係にします。
viewportの設定は、head要素のmetaタグで以下のように行います。
<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
width=device-widthが解像度、target-densitydpi=device-dpiがピクセル濃度(dpi)を端末のサイズに合わせるための設定です。
その他のパラメーターは、ユーザーによる拡大縮小(ピンチイン、ピンチアウトなど)を抑止するための設定です。
②JavaScriptでviewportのサイズを取得します。
viewportサイズの取得は、①の設定によって、端末画面サイズの取得を意味します。
screen.width
③viewportのエミュレーション値と実際のviewport値の比率を求める。
例えば、viewportのwidthを640pxとして、エミュレーションする場合は、以下のようになります。
var scale = screen.width / 640 * 100 + "%";
④CSSのzoomプロパティでページ全体を拡大縮小する。
①から④を実施することで、viewportを任意のサイズ(width)として、エミュレーションすることができます。
以下は、viewportのエミュレーションを実現するJavaScriptの一例です。
function viewport(width) {
var rootElement = document.documentElement;
var scale = screen.width / width * 100 + "%";
rootElement.style.zoom = scale;
}
CSSやJavaScriptが描画エリアとして参照しているのは、viewportです。
viewportの横幅は、デフォルトで980pxに設定されています。
では、端末の解像度が640px(width)の場合、viewportの右端の画像は切り除かれてしまうのでしょうか?
いいえ、その様なことはありません。
viewportを基準としてレイアウされた画像は、端末の解像度に合わせて、自動的に拡大縮小されるのです。
つまり、解像度の異なるどんな端末に対しても、viewportだけを意識していれば、イメージした通りに表示させることができるのです。
ところが、残念なことに、この仕組みが適用されるのは、iPhoneのiOSだけなのです。
androidでは、この仕組みがうまく適用されないのです。
しかも、androidは、iPhoneとは異なり、ベンダー毎に解像度やピクセル濃度(dpi)の異なる多種多様な端末が発売されています。
一体どのように、レイアウトの同一性を実現したら良いのでしょうか?
そこで登場するのが、viewportのエミュレーションです。
前置きが長くなりましたが、今回は、このviewportのエミュレーションについて、まとめてみました。
①viewportを端末の解像度、ピクセル濃度(dpi)に合わせることで、viewport = 端末画面 の関係にします。
viewportの設定は、head要素のmetaタグで以下のように行います。
<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
width=device-widthが解像度、target-densitydpi=device-dpiがピクセル濃度(dpi)を端末のサイズに合わせるための設定です。
その他のパラメーターは、ユーザーによる拡大縮小(ピンチイン、ピンチアウトなど)を抑止するための設定です。
②JavaScriptでviewportのサイズを取得します。
viewportサイズの取得は、①の設定によって、端末画面サイズの取得を意味します。
screen.width
③viewportのエミュレーション値と実際のviewport値の比率を求める。
例えば、viewportのwidthを640pxとして、エミュレーションする場合は、以下のようになります。
var scale = screen.width / 640 * 100 + "%";
④CSSのzoomプロパティでページ全体を拡大縮小する。
①から④を実施することで、viewportを任意のサイズ(width)として、エミュレーションすることができます。
以下は、viewportのエミュレーションを実現するJavaScriptの一例です。
function viewport(width) {
var rootElement = document.documentElement;
var scale = screen.width / width * 100 + "%";
rootElement.style.zoom = scale;
}
コメント
コメントを投稿