Как отключить отображение div'a для мобильных устройств?

Question

[Александр К]

Здравствуйте, не могу найти простое решение как отключить отображение div'a для мобильных устройств.
Подскажите решение кто сталкивался.

Answer 1

[Анна Бакурова]

@media (max-width: 480px) {
    div {
        display: none;
    }
}

Comments

[Александр К]

Спасибо, теперь буду знать.

[Евгений Петров]

У меня iPod 640x960

[Анна Бакурова]

почитайте про медиа запросы. Но бывают ситуации когда нужно удать блок для устройства а не ширины окна или положения дисплея, тогда только js спасает

[Анна Бакурова]

@Petroveg ну обычно при адаптивном дизайне, стили пишут под 1920, 1280, 1024, 768, 480, 360 - может изменяться в зависимости от компании или заказчика

[Евгений Петров]

А как влияет компания или заказчик на технические характеристики устройств?

[Анна Бакурова]

@Petroveg не на устройство, а на предпочтения на какую аудиторию ориентироваться. Можно писать стиль вообще к каждому устройству, но есть ли смысл. www.adamkaplan.me/grid - их очень много.

[Евгений Петров]

@Libris какие предпочтения? Пример — один открыл сайт на iPod 3, другой на iPod 4s. У них будут разные версии? При том, что устройства явно одного класса, но у второго разрешение в 2 раза больше.

[Анна Бакурова]

@Petroveg у iPod 4s ретина?

[Анна Бакурова]

@Petroveg а у iPod 3 нет?

[Евгений Петров]

@Libris да

[Евгений Петров]

@Libris ретина относится к разрешению устройства и разрешающей способности глаза. 250+ ppi уже считаются ретиной. у iPod 3 163 ppi, iPod 4 и iPod 5 326 ppi.

[Анна Бакурова]

@Petroveg а причём тут разрешения??? Я более чем уверена что и разрешения у них одинаковые просто под ретину через те же медиа запросы подключаются картинки x2. - это Я по iPhone сужу. Так как мы под них делаем под 3-5 и проблем с этим никаких нет разрешения одинаковые только дисплеи разные

[Анна Бакурова]

@Petroveg вёрстка для iphone идёт вся под 320 только для ретины картинки свои вставляются

[Евгений Петров]

@Libris при том, что физически размеры экрана у iPod 3 и iPod 4 одинаковы, а количество пикселей разное. Ваше правило будет работать на iPod 3, но на iPod 4 не повлияет.

Спрошу ещё раз — с вашим правилом на этих 2-х устройствах сайт будет выглядеть по-разному?

[Евгений Петров]

@Libris давайте не будет уходить от темы. Вопрос был про отключение блока на мобильном устройстве. Вы дали ответ, но он означает, что на iPod 3 блок скроется, а на iPod 4 и iPod 5 останется.

Вопрос — что сделать для скрытия блока на iPod 4 и iPod 5?

[Анна Бакурова]

@Petroveg так напишите не 320 а 640! хотя хавать запрос он будет от 320 так как ретина 640 ведёт себя как 320 только картинки берёт х2. Не знаю почему так, но уже не один сайт тестили и он брал запрос от 320. Опять же Вы можете пойти и по более сложному пути - распознавать устройство через js. Но есть ли смысл?

[Анна Бакурова]

Спрошу ещё раз — с вашим правилом на этих 2-х устройствах сайт будет выглядеть по-разному? - нет если подключать ретину

[Анна Бакурова]

@Petroveg habrahabr.ru/post/196030

[Евгений Петров]

@Libris вы дали ссылку, чтобы каждый мог увидеть, насколько много там условий типа device-pixel-ratio?))

Почему вы не дали ссылку сразу, а написали условие, явно не работающее на современных устройствах?

[Анна Бакурова]

@Petroveg эммм... а эта ссылка уже к главному вопросу не относится.. Иногда заказчик не просит поддержку ретины. И да бывает не только x2 но и x3, x4... К ним вообще редко кто делает. Почему редко так это вопрос к дизам которые не дают картинки x3 и x4 и к заказчикам которые не требуют

[Анна Бакурова]

мой пример работает и работает на всех новых устройствах - Я просто показала пример (это не рыбка, а удочка которая поймает рыбку). просто автору нужно почитать про медиа запросы и что они умеют а что нет