[Решено] Разный текст с десктопа и с мобильного устройства

[susha]

Здравствуйте. Скажите пожалуйста, можно ли так сделать и как?: когда заходишь с компьютера виден один текст, а когда с мобильного устройства - другой.

[n3bo]

Не разрешаем. Это какое-то описание? большой текст? тогда однозначно так делать не нужно

[zlatoff]

Ну если не отдельная мобильная версия, то такое "волшебство" достигается классами bootstrap'а. 

[Skunk]

либо js, либо "собака"media, но грузить пользователю придется оба текста. зачем это?

[susha]

Ну там у меня ссылка для десктопа одна а для мобильного устройства должна другая быть.

Можно подробнее, как это сделать?

[zlatoff]

Можно так:

<div class="visible-lg visible-md">десктоп / горизонтально планшет</div>
<div class="visible-sm visible-xs">мобила / вертикально планшет</div> 

 

[florapraktik]

https://getbootstrap.com/docs/3.3/css/#responsive-utilities

[susha]

43 минуты назад, zlatoff сказал:

Можно так:

<div class="visible-lg visible-md">десктоп / горизонтально планшет</div>
<div class="visible-sm visible-xs">мобила / вертикально планшет</div> 

 

 

А как будет:

десктоп

мобила / планшет, хоть горизонтально, хоть вертикально

?

[susha]

У меня там стоит телефон с тегом, для удобства: Позвонить: <a title="Позвонить" href="tel:+79000000000">+7 (900) 000-00-00</a>

 

Змінено 7 грудня 2017 користувачем susha

[zlatoff]

29 минут назад, susha сказал:

 

А как будет:

десктоп

мобила / планшет, хоть горизонтально, хоть вертикально

?

 

Вот так:

 

<div class="visible-lg">+7 (900) 000-00-00</div>
<div class="visible-md visible-sm visible-xs"><a title="Позвонить" href="tel:+79000000000">+7 (900) 000-00-00</a></div>

 

Змінено 7 грудня 2017 користувачем zlatoff

[susha]

33 минуты назад, zlatoff сказал:

 

Вот так:

 

<div class="visible-lg">+7 (900) 000-00-00</div>
<div class="visible-md visible-sm visible-xs"><a title="Позвонить" href="tel:+79000000000">+7 (900) 000-00-00</a></div>

 

Только не получается, чтобы в одну строчку это было.

сделал так:

<p>Позвонить по телефону: <div class="visible-lg">+7 (900) 000-00-00</div><div class="visible-md visible-sm visible-xs"><a title="Позвонить" href="tel:+790000000">+7 (900) 000-00-00</a></div></p>

 

Получается так:

Позвонить по телефону:

+7 (900) 000-00-00

 

а в коде так:

<p>Позвонить по телефону: </p><div class="visible-lg">+7 (900) 000-00-00</div><div class="visible-md visible-sm visible-xs"><a title="Позвонить" href="tel:+790000000">+7 (900) 000-00-00</a></div><p></p>

 

Подскажите как написать правильно?

[susha]

лишние </p> <p> удаляю, а они снова появляются. Это все в модуле "HTML Содержимое"

[zlatoff]

Попробуйте сохранять в режиме просмотра кода.

Змінено 7 грудня 2017 користувачем zlatoff

[susha]

34 минуты назад, zlatoff сказал:

Попробуйте сохранять в режиме просмотра кода.

 

Пробовал. Всё равно появляются.

[susha]

Получается, но только так:

 

<p></p><div class="visible-lg"> Позвонить по телефону: +7 (900) 000-00-00</div><div class="visible-md visible-sm visible-xs"><a title="Позвонить" href="tel:+79000000000"> Позвонить по телефону: +7 (900) 000-00-00</a></div>

С удалением кэша.

Змінено 7 грудня 2017 користувачем susha

[zlatoff]

Визуальные редакторы - зло. Хотя и не абсолютное ) Попбробуйте скормить ему вот такую загоулину:

<p><span class="visible-lg"> Позвонить по телефону: +7 (900) 000-00-00</span><span class="visible-md visible-sm visible-xs"><a title="Позвонить" href="tel:+79000000000"> Позвонить по телефону: +7 (900) 000-00-00</a></span></p>

Вместо div - span, и все это обернутое в так видимо необходимый параграф.

[susha]

Спасибо большое! Так получается.