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

Question

私は、デバイスの種類に応じて2つのdivを表示し、非表示にするには、この実際のコードを持っている：

問題：アンドロイドの＃DIVと、デスクトップが表示されます。

• 私は、モバイルデバイス上でのみのdiv＃divのモバイルを表示する必要が

  私はデスクトップデバイス上のみのdiv＃divのデスクトップを表示する必要が

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> 

Answer 1

私はちょうどライブリンクをチェックしています。

応答デバイスにはメタタグがありません。

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

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

Answer 2

EDIT あなたのサイトを見た後、あなたが追加する必要があります。

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

---

あなただけimg使用CSSでwidth/height htmlタグを使用していない、またmin-width

を使用することができます代わりに

---

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>

Answer 3

は、あなたの media queries次のように変更し

。

幅を希望どおりに変更してください。トップのメディアクエリでは、最小幅が標準モバイルサイズよりも大きい場合はxyz、次に小さい場合は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; } 

} 

Answer 4

この行だけ、それはあなたがデバイスタイプだけでなく、画面の大きさを検出し、真に必要であることをユーザシステムのサイズの分解能を見つけて、あなたのCSSコードに <meta name="viewport" content="width=device-width, initial-scale=1.0">