18

幅が 640px の Web アプリを作成しています。

head設定したドキュメントで

  <meta name="viewport" content = "width=640, user-scalable=no" />

そのため、コンテンツはきれいに表示され、水平方向に引き伸ばされます。
これは iOS では完全に機能しますが、Android ではブラウザーが Web サイトをズームインして開くため、ユーザーはダブルクリックしてズームアウトし、ページ全体を表示する必要があります。

ビューポート設定を変更して、次のuser-scalableようにタグを除外すると:

<meta name="viewport" content="width=640" />

Android ブラウザは 640px にうまく調整されるため、動作します。ただし、問題は、タグが設定されていない
ため、Android と iOS でユーザーがズームインおよびズームアウトできることです。user-scalable

Androidでスケーリングを禁止し、同時にビューポート幅を640pxに設定するにはどうすればよいですか?

4

3 に答える 3

36

次のようにビューポート メタ タグをレンダリングしてみます。

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

スケール設定を設定すると、ズームできる範囲にユーザー制限が設定されるため、初期値と最大値を同じ量に設定すると、問題が解決するはずです。

更新: 以下を設定することで、Android デバイスのバグをまとめて修正できました。

<meta name="viewport" content="width=640px, initial-scale=.5, maximum-scale=.5" />

また、p タグなどの一部のコンテンツが画面全体に流れていないことにも気付きました。そのためのハックは、スタックしてレイアウト ビューを横切らないコンテンツに、空の文字列を含む background-image プロパティを追加することです。今回はこれがお役に立てば幸いです。

于 2012-10-08T16:25:39.047 に答える