1

幅が1024pxに固定され、デスクトップの中央に配置された Web サイトがあります。モバイル デバイスでは、幅は携帯電話またはタブレットのサイズと一致する必要があります。

デバイス幅を使用する場合、このように

<meta name="viewport" content="width=device-width, initial-scale=1" />

次の結果が得られます。

デバイス幅

を使用しても同じ結果が得られwidth=1024ます。

... ユーザーが概要を収集できないため、これは非常に紛らわしいです。device-widthWeb サイトのビューポートをこの特定のサイズに設定する理由がわかりません。そうでなければ期待します。

私が期待していて、本当に欲しいのはこれです：

期待

質問: Web サイトが画面に正確に収まるようにデバイスに指示するにはどうすればよいですか?

4

2 に答える 2

2

ウェブサイトを適応性と応答性を高めるために、使用することをお勧めします

@media screen and (max-width: the max width you want){ }

これを に追加することもできます。これにより、初期スケールが 1 になり、3 倍にズームできるようになります。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3" />

また、ラップ要素ではピクセルの代わりに % を使用する必要があります。このようにして、画面に合わせて調整します。

次に例を示します。

  • 幅が 0 ～ 500 ピクセルのデバイスの場合は、2 番目の CSS コードを実行します。
  • 幅が 500 ～ 1600 ピクセルのデバイスの場合は、最初の CSS コードを実行します。

これを使用して網膜を指定することもできます。

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx){ }

これは他の例です：

/** From 500 - 1600px width **/
@media screen and (max-width: 1600px){
    body {
        background-color: #fff;
    }
}
/** From 0 - 500px width **/
@media screen and (max-width: 500px){
    body {
        background-color: #000;
    }
}

以前、同様の質問をしました。ここで確認できます。

于 2015-03-26T12:14:04.173 に答える