1

ユーザーが指でズームイン/ズームアウトしたときに、Android ブラウザー (できれば純粋な CSS3 を使用) でビューポートの幅を変更しないようにする方法を知りたいですか?

ページに複数のメディア クエリがあり、異なるビューポート幅を目指しています。しかし、ユーザーがページのビューポート幅をズームイン/ズームアウトするたびに変更されるため、ページのレイアウトが並べ替えられ、これは発生しません。Android ブラウザーに初期のビューポート サイズを「記憶」させ、ユーザーがズームイン/アウトしたときに、Android ブラウザーにズームするだけで、ビューポート サイズを変更しないようにします。

これは CSS で可能ですか? 事前に助けてくれてありがとう。

編集:私のメディアクエリ:

@media only screen and (min-width : 800px) and (max-width : 999px) {
  #content { width:800px; }
}
@media only screen and (max-width : 799px) {
  #content { width:600px; }
}
4

2 に答える 2

4

メタ タグを使用してviewport、モバイル ブラウザーのビューポートの幅を特定の固定サイズに変更できます。これにより、ビューポートのネイティブの幅に基づいて、初期ロード時にブラウザーが強制的にズームインされます。この固定幅を参照点として使用して、ページ上の他の要素のサイズを設定できます。

たとえば、ビューポートの幅を 600px に設定したい場合は、HTML に次の行を含めます<head>。

<meta name="viewport" content="width=600px">

次に、ビューポートに比例してどのくらいの幅になるかを知って、ページ上の他の要素の幅を設定できます。たとえば、この要素はモバイル ブラウザの幅全体を使用します。

#content {
   width: 600px;
}

ビューポートに合わせてコンテンツをスケーリングするのではなく、コンテンツに合わせてビューポートをスケーリングできます。

于 2012-01-21T00:37:26.347 に答える
-2

別のアプローチを採用し、ズーム制限が設定されたレスポンシブ/アダプティブ テーマを使用することをお勧めします。

于 2012-01-20T10:13:08.147 に答える