4

私はレスポンシブデザインのウェブサイトを開発しています。Web サイトは、iPhone と iPod (両方とも幅 640px) に最適化されます。

次の CSS3 メディア クエリを使用しています。

    @media screen and (max-width: 640px) {
        .display-none-mobile{
            display: none;
        }
    }
    @media screen and (min-width: 641px) {
        .display-none-desktop{
            display: none;
        }
    }

上記のコードは、ブラウザの幅を 640px に縮小すると、デスクトップ ブラウザでうまく機能します。ただし、Safari ブラウザを使用して iPod で Web サイトをテストしようとすると、コードが機能しません。

CSS3 メディア クエリを次のように変更しました。

    @media screen and (max-device-width: 640px) {
        .display-none-mobile{
            display: none;
        }
    }
    @media screen and (min-device-width: 641px) {
        .display-none-desktop{
            display: none;
        }
    }

現在、レスポンシブ デザインは iPod の Safari では機能していましたが、他のすべてのデスクトップ ブラウザーではレイアウトが台無しになりました。これらの css3 メディア クエリは、私のデスクトップ (幅 640px) の oChrome、IE、FF によって完全に無視されました。

そのため、css3 メディア クエリとのクロス ブラウザー互換性に関連する何かがあることがわかりましたが、これに関する多くの情報を見つけることができませんでした。css3 メディア クエリをすべてのブラウザ (または少なくとも主要なブラウザ) で動作させるようにコードを更新するにはどうすればよいでしょうか。私は少なくともターゲットにしています

  1. IE ウィンドウ
  2. サファリウィンドウ
  3. クローム Windows
  4. Firefox Windows
  5. サファリ iPod
  6. クローム iPod
4

1 に答える 1

12

HTMLに次のタグを追加しない場合<meta>、デバイスはメディア クエリを無視します。

<!DOCTYPE html>
<html lang="en-us">
    <head>
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
    </body>
</html>
于 2013-05-09T03:31:35.687 に答える