PhoneGap + Windows Phone 8：HTML5ビューポートのメタ設定とスケーリング問題の解決法

スケーリング問題が起きる原因

PhoneGapでWindows Phone 8向けのHTML5アプリを開発していると、ビューポートのスケーリングが意図したとおりに動作しないケースがあります。このような問題に直面した場合、その多くはCSSの記述方法に原因があります。ビューポートのメタタグだけでは不十分で、CSS側でも適切な設定を行う必要があるのです。

解決策1：CSSにzoomとcontent-zoomingを指定する

まず試していただきたいのが、CSSに以下のスタイルを追加する方法です。

* {
    zoom: 1;
    -ms-content-zooming: none;
}

-ms-content-zooming: none; を指定することで、Windows Phone 8搭載のInternet Explorer Mobileによるコンテンツの自動ズームを無効化できます。これにより、画面が勝手に拡大・縮小される現象を防げます。

解決策2：@viewportルールを使用する

コードの内容によっては、次のように @viewport および @-ms-viewport ルールを使うことでも問題を解決できます。

@viewport
{
    width: 320px;
}
@-ms-viewport {
    width: 320px;
    zoom-user: fixed;
    max-zoom: 1;
    min-zoom: 1;
}

各プロパティの役割

• width: 320px; — ビューポートの幅を320ピクセルに固定し、レイアウトの一貫性を保ちます。
• zoom-user: fixed; — ユーザーによるズーム操作を固定し、意図しない拡大縮小を防止します。
• max-zoom: 1; / min-zoom: 1; — ズーム倍率の上限と下限を1倍に制限します。

まとめ

Windows Phone 8のIE Mobileは独自のズーム挙動を持つため、標準的なビューポートメタタグだけでは制御しきれないことがあります。-ms-content-zooming や @-ms-viewport といったベンダー固有のプロパティを組み合わせることで、PhoneGapアプリでも安定した表示を実現できます。まずは上記のCSSを追加し、実際のデバイスで動作を確認してみてください。