2

ビューポート、@media、ピクセル比などに苦労しています。320px と 640px のテンプレートが 1 つずつあるスマートフォン (レスポンシブ) Web サイトがあり、次のことを実現したいと考えています。

幅 320px まで: 320px のテンプレートを表示します。

幅 321 から 639 ピクセル: 640 ピクセルのテンプレートを画面に合わせてズームアウトして表示します。

640px 以上: 640px テンプレートを表示 (ズームなし)

(640px テンプレートには実際に 640px 幅の画像やものが含まれているため、ズームはビューポートまたはメタ タグで行う必要があると思います)

4

1 に答える 1

0

次のようなモバイル ファーストの設計にはメディアクエリを使用します。

@media only screen  and (max-device-width : 320px) {

/* Styles 320px */
.imageContainer{display:none} /*example for image containing element*/
}

中画面用。

@media only screen and (min-device-width : 321px)
    and (max-device-width : 639px) {

    /* Styles upto 640px */
    .imageContainer{display:none}
    }

および 640px を超える画面の場合。

@media only screen  and (min-device-width : 640px) {

    /* Styles above 640px */
    .imageContainer{
       display:block;
     }
    .imageContainer img{
      width:100%; /*gives full width to all images on this viewport*/
      height:auto;
       }
    }

iPhone4 や iPad などの Retina ディスプレイ用。

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

はい、ビューポートのズームは、頭に含まれるメタタグによって維持されます。

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />
于 2013-04-12T18:12:19.367 に答える