Показывать «это», если на рабочем столе, и показывать «то», если на мобильном устройстве

DARKAN1

Судя по заголовку, вы хотите показывать другой рекламный сценарий на форуме phpbb, если используете настольный компьютер или мобильный телефон. У меня есть объявления, которые не реагируют. У меня есть это...
http://blog.hubspot.com/marketing/site-content-only-mobile-viewers-can-see-ht

 <div class="mobileShow">


TEXT OR IMAGE FOR MOBILE HERE


</div>


This div will declare that this copy will respond only when the class is triggered. By adding the code below, the class will only be triggered when the user is on a mobile device. Add the following code in the HTML <head> section of your page:


<style type="text/css">


.mobileShow { display: none;}


/* Smartphone Portrait and Landscape */


@media only screen


and (min-device-width : 320px)


and (max-device-width : 480px){ .mobileShow { display: inline;}}


</style>


Hide content on mobile devices.


To hide certain text or images that will not display on mobile devices, you will add similar code as before in your HTML <body>:


<div class="mobileHide">


TEXT OR IMAGE NOT FOR MOBILE HERE


</div>


Then, you will want to add the following code to your HTML <head> section:


<style type="text/css">


.mobileHide { display: inline;}


/* Smartphone Portrait and Landscape */


@media only screen


and (min-device-width : 320px)


and (max-device-width : 480px){ .mobileHide { display: none;}}


</style>

Код (разметка): Но это немного медленно, и мне было интересно, можно ли что-нибудь сделать лучше, а также как бы я использовал Скрытая информация :: Авторизуйтесь для просмотра »
.

MastaDan

Спасибо, но я возился с этим и до сих пор не могу заставить его работать, особенно когда я добавляю рекламный код re: Рекламный скрипт Google. Мне нужен рекламный скрипт, который будет отображаться только на мобильных устройствах. И еще один только для настольного компьютера. Так что понадобится и А также Скрытая информация :: Авторизуйтесь для просмотра »
для мобильных устройств и Скрытая информация :: Авторизуйтесь для просмотра »
для настольных компьютеров. Я действительно не могу понять, как это сделать.

in_my_veins_

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

Например (это лишь основные примеры):

 
<meta name="viewport" content="ширина = ширина устройства, начальный масштаб = 1, минимальный масштаб = 1, масштабируемый пользователем = да">

Код (разметка): Итак, теперь на мобильных телефонах ширина составляет 400 пикселей, а цвет #CCC. Или вы можете полностью скрыть что-то, используя display: none;

  .some_div { display: block; width: 1000px; height: 300px; background-color: #FFF; } @media (max-width: 479px) { .some_div { display: none; } }

Код (разметка): Итак, теперь .some_div полностью скрыт от просмотра на мобильных телефонах. И т. д. и т. п. И я забыл упомянуть.

Вам нужно добавить это в свой :

  .some_div { width: 1000px; height: 300px; background-color: #FFF; } @media (max-width: 479px) { .some_div { width: 400px; height: 300px; background-color: #CCC; } }

Код (разметка):

Blendamet

Ого, это применение медиа-запросов просто.

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

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

И это.

в большинстве случаев не идеально.

Возможно, можно было бы сделать дополнение отзывчивым, хотя я не уверен, что вам это нужно. Кроме того, я сомневаюсь, что этот небольшой фрагмент сам по себе медленный.

Что обычно вас замедляет, так это добавление стороннего дерьма на ваш сайт, например, add.

Вы не можете ни предсказать его поведение, ни его содержание, вы не можете доверять ему как таковому. Я бы выбрал что-то простое:

 @media screen and (max-width:480px) {

.advert { display:none }
}

Код (разметка): ...если я не решу полностью отказаться от ненадежной рекламы на своем сайте.

Ulmoney

Спасибо за ваш ответ, куда бы я поместил опубликованный вами код. Я неплохо разбираюсь в html/css, но это меня ставит в тупик. И что делает этот код? А как насчет этого кода ниже?

 @media (max-width: 479px) {


.show-on-desktop, .show-on-tablets, .hide-on-mobile { display: none; }


}


@media (min-width: 480px) and (max-width: 979px) {


.show-on-desktop, .hide-on-tablets, .show-on-mobile { display: none; }


}


@media (min-width: 980px) {


.hide-on-desktop, .show-on-tablets, .show-on-mobile { display: none; }


}

Код (разметка). Где разместить рекламный код, чтобы показать/скрыть его?

Похожие темы	Дата
Технический вопрос по визиткам	19.10.2024, 18:10
Размер пиксельной картинки при печати	19.10.2024, 18:10
помогите мне решить проблемы с медленным сайтом	19.10.2024, 18:10
Можно ли извлечь весь блог blogspot?	19.10.2024, 18:10
Сколько будет стоить создание такого типа веб-сайта? (сколько мы должны платить?)	19.10.2024, 18:10
Панель управления Jetpack изменилась?!	19.10.2024, 18:10
Шаблон объявления Ebay	19.10.2024, 18:10
Центр сценария	19.10.2024, 18:10
Как создать файл bookmarks.html с автоматическим стилем?	19.10.2024, 18:10
Слайд-шоу плохо работает на мобильных устройствах	19.10.2024, 18:10

Показывать «это», если на рабочем столе, и показывать «то», если на мобильном устройстве

DARKAN1

MastaDan

in_my_veins_

Blendamet

Ulmoney

I AM

Интересно