AndroidプラットフォームでJquery Mobileを使用してPhonegapを使用してアプリケーションを開発しています。
シンプルなページをデザインしました。まだカスタマイズを開始していません。しかし、下の画面を見てください。
画面 1: Android デバイスの PhoneGap 内で起動されたページ
画面 2: 同じ Android ブラウザーで .html ページとして起動された同じページ
サイズのバリエーションを参照してください... 表示が異なるのはなぜですか? Phonegap 用の jQuery モバイル ページを設計する際に、標準的な考慮事項を考慮する必要がありますか?
ビューポートのメタ タグ内はどうなりますか?
たとえば、次のようなものがあります。
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
私がこれを使用していた私のアプリケーションの1つで、アプリケーションの外観と同様に「ズームアウト」しているように見えました。
これを解決するために、ビューポートのメタ タグを次のように変更しました。
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />
最良の方法は、ビューポートの寸法を基準にして要素のフォント サイズを設定する vw や vh などのビューポート単位を使用することです。