web-dev-qa-db-ja.com

モバイルとデスクトップでdivを表示/非表示にするCSSメディア？

私はこれを持っています実際のコードデバイスタイプに応じて2つのdivを表示および非表示にします：

問題：in Android＃div-desktopが表示されます。

  • モバイルデバイスではdiv＃div-mobileのみを表示する必要があります

  • デスクトップデバイスではdiv＃div-desktopのみを表示する必要があります

CSS

        @media screen and (min-width: 0px) and (max-width: 700px) {
      #div-mobile {    display: block;  }
      #div-desktop {    display: none;  }
    }

    @media screen and (min-width: 701px) and (max-width: 3000px) {
      #div-mobile {    display: none;  }
      #div-desktop {    display: block;  }

}

HTML

<div id="div-mobile">m<img width="100%" height="auto" src="http://uggafood.com/wp-content/uploads/2017/03/ugga-food_mobile.jpg" alt="" width="600" height="1067" /></div>


<div id="div-desktop">d<img width="100%" height="auto"  src="http://uggafood.com/wp-content/uploads/2017/03/ugga-food_desktop.jpg" alt="" width="1920" height="1280" /></div>
htmlcssresponsive-designmedia-queries
5
JPashs

ライブリンクを確認しました。

レスポンシブデバイスのメタタグがありません。

モバイルデバイスを検出するための以下のコードを追加します。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
5
Sahil Dhir

[〜＃〜] edit [〜＃〜]サイトを見た後、以下を追加する必要があります。

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

min-widthを使用できます

また、imgでwidth/heighthtmlタグを使用しないでください。代わりにCSSを使用してください。

img {
  max-width: 100%
}

#div-desktop {
  display: none;
}

@media screen and (min-width: 701px) {
  #div-mobile {
    display: none;
  }
  #div-desktop {
    display: block;
  }
}
<div id="div-mobile">m<img src="http://uggafood.com/wp-content/uploads/2017/03/ugga-food_mobile.jpg" alt="" /></div>
<div id="div-desktop">d<img src="http://uggafood.com/wp-content/uploads/2017/03/ugga-food_desktop.jpg" alt="" /></div>
3
dippas

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

幅を好きなように変更するだけです。上のメディアクエリは、最小幅が標準のモバイルサイズを上回っている場合はxyzを示し、2番目のクエリはそれを下回っている場合はabcを示します。

@media screen and (min-width: 769px) {

    #div-mobile { display: none; }
    #div-desktop { display: block; }

}

@media screen and (max-width: 768px) {

    #div-mobile { display: block; }
    #div-desktop { display: none; }

}
1
user7236046

この行は、ユーザーシステムのサイズ解像度のみを検索し、cssコードに<meta name="viewport" content="width=device-width, initial-scale=1.0">

0
Jana