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;
}