Div показать/скрыть медиа-запрос

Какой код можно использовать для создания отдельного div-шоу только в том случае, если на мобильной ширине?

У меня полноразмерный div шириной 100% в верхней части экрана, хотелось бы, чтобы он показывал только, когда устройство указано как мобильная ширина.

Ответы

Ответ 1

Я не уверен, что вы подразумеваете под "мобильной шириной". Но в каждом случае 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/ или другие похожие источники.

Ответ 2

Похоже, вам может потребоваться доступ к окну просмотра устройства. Вы можете сделать это, вставив этот метатег в свой заголовок.

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

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