web-dev-qa-db-ja.com

Divの表示/非表示メディアクエリ

モバイル幅の場合にのみ特定のdivを表示するには、どのコードを使用できますか？

画面の上部に100％幅のフルdivがあります。デバイスがモバイル幅として指定されている場合にのみ表示するようにします。

mobilemedia
34
Francesca

「モバイル幅」とはどういう意味かわかりません。しかし、それぞれの場合、CSS @mediaは、画面幅ベースで要素を非表示にするために使用できます。例を参照してください。

<div id="my-content"></div>

...そして：

@media screen and (min-width: 0px) and (max-width: 400px) {
  #my-content { display: block; }  /* show it on small screens */
}

@media screen and (min-width: 401px) and (max-width: 1024px) {
  #my-content { display: none; }   /* hide it elsewhere */
}

一部の真のモバイル検出は、一種のハードプログラミングであり、かなり困難です。最終的に参照してください： http://detectmobilebrowsers.com/ または他の同様のソース。

82
Martin Poljak

デバイスのビューポートにアクセスしたいようです。これを行うには、ヘッダーにこのメタタグを挿入します。

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

http://www.w3schools.com/css/css_rwd_viewport.asp

0
Joe Neuman