Форум Сайтостроение Веб-строительство

Как вывести разные div для разных устройств ?

12
V7
На сайте с 27.11.2010
Offline
108
vaf76
691

Доброго времени суток уважаемые форумчане.

Подскажите, как сделать так чтобы для мобильного устройства показывался <div class="showmobile">, а для десктопного <div class="showdesktop">

<div class="showmobile">контент только для мобильных</div>

<div class="showdesktop">контент только для компьютеров</div>

[Удален]
#1

Покопайте медиа-запросы, например:

http://htmlbook.ru/css/value/media

Chkan
На сайте с 22.10.2008
Offline
104
Chkan
#2

Вот тут есть хороший css template для всех типов устройств, но вообще лучше юзать тот же bootstrap, с которым задача сводится к добавлению классов типа .d-lg-none для того чтоб спрятать showdesktop ну и .d-sm-none для showmobile.

🤠 Разработка/сопровождение проектов на Python/Django (https://django.ws)
LC
На сайте с 29.04.2015
Offline
60
Алашеев Александр
#3

Через медиазапросы для определенных разрешений можно реализовать, прописывая для блоков свойство display.

D.iK.iJ
На сайте с 26.05.2013
Offline
198
D.iK.iJ
#4

Сделать, например, так:

<div class="showmobile" style="display: none;">

А в стилях:

@media screen and (max-width: 960px) {
.showmobile {display: block !important;}
}

Это для ширины экрана 960 пикселей и меньше. Ну а showdesktop наоборот - скрыть.

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

---------- Добавлено 26.07.2019 в 00:00 ----------

Да, если нужно скриптом - тоже могу написать.

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).
Google AdSense улучшил адаптивные В Яндекс.Вебмастере появилась проверка Google: как сделать статические
Z0
На сайте с 03.09.2009
Offline
737
ziliboba0213
#5
DiKiJ:
Да, если нужно скриптом - тоже могу написать.

На jquery я так делаю:


if(screen.width<500)
{
 $('.нужный_класс').css({'display':'none'});
}

:p

Но загружаться все равно оба будут. Чтобы не подгружать, надо не скрывать, а выводить через js :)

VoV@
На сайте с 22.09.2007
Offline
196
VoV@
#6

Скриптами такие вещи делать - это перебор ИМХО.

⭐ Разработка Андроид-приложений (Xamarin C#). ⭐ Разработка ASP.NET (WebForms, MVC, WebAPI, Core). ⭐ Цой жив!
Z0
На сайте с 03.09.2009
Offline
737
ziliboba0213
#7
VoV@:
Скриптами такие вещи делать - это перебор ИМХО.

А если там серьезный блок с картинками? А так то да :)

D.iK.iJ
На сайте с 26.05.2013
Offline
198
D.iK.iJ
#8
ziliboba0213:
На jquery я так делаю
if(document.getElementsByTagName("body")[0].offsetWidth <= 960) {
document.write('111');
} else {
document.write('222');
}

Больше вариантов! :)

Z0
На сайте с 03.09.2009
Offline
737
ziliboba0213
#9
DiKiJ:
Больше вариантов! :)

Да в принципе еще через аякс можно, так ваще минимум загрузок 🤪

Gerga
На сайте с 02.08.2015
Offline
94
Gerga
#10
ziliboba0213:
На jquery я так делаю:p

Плохо делаете :p

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий