1

ユーザーのデバイスに応じて、デスクトップ バージョンまたはモバイル バージョンのいずれかをレスポンシブに表示する Web サイトを設計しようとしています。モバイル リダイレクトではなく、レスポンシブ CSS でこれを行うことを好みます。

問題の Web サイトはhttp://www.raceweekend.comです。ブラウザー ウィンドウがモバイル幅にサイズ変更されると、次のことが起こるはずです。

  1. 水平メニューは赤い四角形のブロックで垂直になるはずです
  2. 回転する画像が消えるはずです
  3. ロゴは上部中央に配置する必要があります
  4. 日付（ロゴの横）が消えるはずです

CSS は、IE9 と Firefox の両方で、私が望むとおりに動作します。ウィンドウのサイズを十分に狭くすると、上記のすべての項目が発生します。

モバイルでは、通常のブラウザー バージョンが表示されるだけです。上記の項目は発生しません。iPhone 4 と Samsung Galaxy Nexus でテストしました。

ここに私のメディアクエリコードがあります:

@media handheld, screen and (max-width: 480px) {
#nav-bar {
    display:none;
}

#header {
    height:auto !important;
    width:100% !important;
}

#nav {
    height:auto !important;
}

.main-nav li {
    float:none !important;
    clear:both;
    background-color:#cf171f;
    margin-bottom:1px !important;
    padding:0 !important;
}

.main-nav li a{
    display:block;
    padding:10px 18px;
}

.main-nav li a:hover{
    background-color:#be161d;
    color:#ffffff !important;
}

#date {
    display:none;
}

#race-logo {
    width: 100% !important;
}

.center {
    margin: 0px auto;
    display: block;
}

#content, #content-sliders {
    margin-left:5% !important;
    width: 90% !important;
    padding-top:20px !important;
}

#footer {
    font-size:14px !important;
    line-height:1.5em;
}

}
4

2 に答える 2

6

メタ タグを使用して、モバイル ブラウザーが実際の幅を報告するように強制してみてください。

<meta name="viewport" content="width=device-width" />

適切なレスポンシブ デザインがある場合は、ズームを無効にすることもできます。

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
于 2013-02-12T20:34:50.537 に答える
0

metaビューポートタグを HTMLに追加する必要があります。

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

デフォルトでは、実際、iPhone はビューポートの幅が 980px であるかのようにサイトをレンダリングし、実際の幅に合わせて縮小します。これは、iPhone の実際のビューポート幅が 480px (iPhone 3GS 以前では文字どおりの 480px、または倍解像度の iPhone 4 Retina ディスプレイでは「論理的な」480px) であるためです。アクセスしたすべてのサイトの 480 ピクセル幅のスライスのみが表示されます。

まだ混乱していますか？たとえば、デスクトップ ブラウザで NYTimes.com にアクセスし、ウィンドウのサイズを 480px 幅に変更します。ビューポートの幅がデフォルトで 980px と報告されていない場合、iPhone ではこのようにレンダリングされます。

とにかく、それがメディアクエリが機能しない理由です。したがって、上記のmetaタグを追加すると、iPhone は幅を実際の幅 (480px) としてレポートするようになり、メディア クエリの条件と一致します。

于 2013-02-12T21:21:40.787 に答える