Как показывать блок только десктопным или мобильным устройствам?

Question

[Strelcov]

Доброго дня!
Ребята, есть задача.
Есть два рекламных блока adsdesktop и adsmobile.
Когда на сайт зашли с компьютера нужно выводить adsdesktop и скрывать adsmobile.
Когда зашли с мобильного устройства, наоборот соответственно.

Подскажите решение, как реализовать правильнее? Возможно под WP есть плагины для этих дел?

В сети нашел этот код, подходит-ли он и как его применить?

<script type="text/javascript"> 
    var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
    if (mobile) { 
        alert("Мобильное устройство!!");
        $('.navWrap').css('display', 'none'); // или можно $('.navWrap').hide();
    } 
    else 
    { 
       alert("НЕ мобильное устройство!"); 
    }
</script>

Comments

[Strelcov]

Neoline: как адаптировать скрипт мод мою задачу? Взамен .navWrap поставить adsdesktop? Этим мы уберет блок с десктопов, как включить блокa dsmobile?

[Strelcov]

else
{
alert("НЕ мобильное устройство!");
$('.adsmobile').css('display', ',blok');
}

Правильно я понял?

[Игорь Воротнёв]

А при чем здесь теги WordPress, WordPress-плагины, Мобильная разработка? Вопрос же по js/css

Answer 1

[Kote]

@media (max-width: 768px) {
. adsdesktop {
    display: none;
  }
. adsmobile {
display: block;
 }
}

Comments

[Kote]

https://developer.mozilla.org/en-US/docs/Web/CSS/M...

[Sergei Nazarenko]

Neoline: Разрешение то может быть и Full а вот экран не full и размер окна браузера тоже не full

[Sergei Nazarenko]

Neoline: https://itmages.ru/image/view/5256244/449b7fd8

[Sergei Nazarenko]

Neoline:

document.addEventListener('DOMContentLoaded', ()=>{
    'use strict';
    let doc = document,
        html = [],
        info = ['scr', 'wnd'];
    html.push('<div class="info"></div>');
    doc.body.innerHTML=html.join('');
    html = [];
    for (let i =0; i<=1; i++){
        html.push('<div id = "'+ info[i] + '"></div>' );
        doc.querySelector('.info').innerHTML = html.join('');

    }
    wnd();
    doc.querySelector('.info').style.cssText = 'background:rgba(0,0,0,.5);color:#fff;width:190px;padding:15px 25px;font-family:\'Open Sans\',sans-serif;font-size:12px;';
    window.addEventListener('resize', wnd);
    function wnd(){
        doc.querySelector('#scr').innerHTML = 'screen resolution: ' + screen.width + ' x ' + screen.height + ' px';
        doc.querySelector('#wnd').innerHTML = 'window size: ' + window.innerWidth + ' x ' + window.innerHeight + ' px';
    };
});

[Sergei Nazarenko]

Neoline: sketchapp.me/podrobno-o-plotnosti-pikselej-v-dizaj...

[Sergei Nazarenko]

Neoline: почему же не даст очень даже даст

[Sergei Nazarenko]

тут смысл в том что у мобильных девайсов и вообще у всяких ретина и прочих экранах есть такая штука как плотность и то что там у айфона например 640×1136 и плотность 2x тоесть пиксель занимает аж 4 пикселя мы получаем реальный размер 320 на 568 и на этом экране это условие media (max-width: 768px) очень даже сработает

[Sergei Nazarenko]

Neoline: да условие написано для не десктопов

[Sergei Nazarenko]

Neoline: дело не в айфонах а в экранах

[Sergei Nazarenko]

Neoline: а что не барахло?

[Sergei Nazarenko]

Neoline: а чхал на экран и тд ну это как минимум не профессионально есть зоопарк экранов и от этого никуда не деться

[Ankhena]

Neoline:

у меня планшет выдает css 1300 при экране 1200

А расскажите, пожалуйста, что за планшетик и что показывает вот этот тест?
https://www.esolutions.se/en-GB/test

[Sergei Nazarenko]

Ankhena W: Да это у него скорее всего viewport не прописан или он измеряет что-то не то )

[Ankhena]

Sergei Nazarenko: ну я тоже так думаю, но проверить-то хочется

[1ax]

Сделал аналогично, в safari работает, на десктопе при смене ширины экрана тоже все меняется - захожу в мобильный Яндекс-браузер - не работает. В чем может быть проблема?