0

私はセマンティクス フレームワークを使用しています。デスクトップ用とモバイル用の 2 つのナビゲーション メニューがあります。私はこのcssを使用しています：

#mob {
    display: none;
}
@media (max-width: 960px) {
    #desktop {
        display: none;
    }
    #mob {
        display: inline-block;
    }

ウィンドウのサイズを変更するとGoogle Chromeで動作しますが、テストした2つのAndroidデバイスでは動作しません。また、ブラウザスタックでios7を使用してテストしましたが、うまくいきませんでした。

私のライブ サイトはこちら: http://kaylins-sites.azurewebsites.net/default.aspx

残りのコードはここにあります: http://jsfiddle.net/Cu3aR/

どんなアドバイスも素晴らしいでしょう。

ありがとう。

4

1 に答える 1

0

これを含める<head></head>

  <meta name="viewport" content="width=device-width, user-scalable=no" /> <-- user-scalable=yes if you want user to allow zoom -->

@media スタイルを次のように変更します

@media only screen (max-width: 960px) {
    #desktop {
        display: none;
    }
    #mob {
        display: inline-block;
    }
}

今、私は多分説明しようとしています.. :)

@media (max-width:960px)

これらのスタイルを適用したいウィンドウmax-widthの 960pxそのサイズでは、ほとんどの場合、デスクトップ画面よりも小さいものについて話しているでしょう.

@media screen and (max-width:960px)

のデバイスとscreenのウィンドウにスタイルmax-widthを960px適用します。これは、他のメディアタイプscreenとは対照的に 、最も一般的な他のメディアタイプを指定していることを除いて、上記とほぼ同じです。print

@media only screen and (max-width:960px)

これを説明するための W3C からの引用を次に示します。

キーワード '<code>only' を使用して、古いユーザー エージェントからスタイル シートを隠すこともできます。ユーザー エージェントは、'only' キーワードが存在しないかのように、'only' で始まるメディア クエリを処理する必要があります。

" " のようなメディア タイプは存在しないためonly、古いブラウザではスタイル シートを無視する必要があります。

于 2014-04-20T10:53:05.467 に答える