4

画面解像度に基づいて 2 つのレイアウトを持つようにサイトを再設計しています。1 つは 1010 ピクセル以上の画面用に 1000 ピクセルを持ち、もう 1 つは小さい画面用に 675 ピクセルを持ちます。現在、次のビューポート タグを使用しています。

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

この設定は、デスクトップ ブラウザーと iPad で正常に機能します。ただし、Android ブラウザーと iPhone ブラウザーの両方でページが正しく表示されず、さまざまなレベルのズームで開始されます。代わりに、幅全体が画面に表示されるように、675px のディスプレイを正しくズーム表示する必要があります。私は使用しようとしました：

<meta name="viewport" content="width=675px, user-scalable=yes">

また、iPhone バージョンを多少改善しますが、iPad は 1024 ピクセルのワイド画面であるにも関わらず、小さいサイズを表示するように強制します。これを修正する方法がよくわかりません。

ちなみにサイトはhttp://dendory.netです

4

3 に答える 3

-1

メディアクエリを操作してみてください。デバイスをターゲットにして、特定の css プロパティを適用できます。スタイルシートに貼り付けるだけです。レスポンシブメールの作成に使用しています。

簡単なメディアクエリの例を次に示します。

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

これが役立つことを願っています！

于 2013-02-25T23:12:51.307 に答える
-1

@mediaクエリを使用してみてください。これらをスタイルシートに適用するだけで、デバイス、サイズ、およびさまざまなデバイスで達成したいことに応じて、さまざまなスタイルを持つことができます。

例えば

/* MOBILE PORTRAIT */
@media only screen and (min-width: 320px) {
    body {

    }
}

/* MOBILE LANDSCAPE */
@media only screen and (min-width: 480px) {
    body {

    }
}

/* SMALL TABLET */
@media only screen and (min-width: 600px) {
    body {

    }
}

これらでは、以下に示すように、デバイスのスケールに応じてさまざまなスタイルを適用できます...

/* TABLET/NETBOOK */
@media only screen and (min-width: 768px) { 
    body {

    }

    /* COLUMN GRID */
    .g1,.g2,.g3 {display:inline; float: left}

    /* 2 COLUMN GRID */
    .g1 {width:48.0%}
    .g2 {width:48.0%}
    .g3 {width:98.0%}
}

/* LANDSCAPE TABLET/NETBOOK/LAPTOP */
@media only screen and (min-width: 1024px) { 
    body {

    }

    /* 3 COLUMN GRID */
    .g1 {width:31.333%}
    .g2 {width:64.667%;}
    .g3 {width:98.0%}
}

これは、すべてのデバイスで完全にインタラクティブな Web サイトを作成したい場合に非常に便利です。最近では、メディア クエリを使用するのが一般的です。

また、メディア クエリはほとんどのブラウザで非常に透過的であるため、使用するのが「良い習慣」になります。これをチェックしてください！

于 2013-02-25T23:46:44.873 に答える