Вопрос или проблема
У меня есть текстовый контент на странице, который приводит к слишком большому скроллингу на мобильных устройствах. Я бы предпочел избежать наличия отдельных страниц для мобильных/настольных устройств. В идеале редактор добавил бы шорткод вокруг определенных параграфов, чтобы позволить скрыть/показать дополнительный контент на меньших экранах.
Таким образом, весь текст ниже будет показан на настольных устройствах, но второй параграф будет заменен на ссылку “скрыть/показать” на мобильных устройствах:
Lorem ipsum dolor sit amet, sit at voluptatum complectitur. Ei per diam case neglegentur. Sea in minim virtute nominati, id pro aperiam pericula, vim te ornatus inciderint.
[HiddenInitiallyforMobile]Vis nominati ullamcorper eu. Animal quaerendum pri at, in mea prodesset temporibus appellantur, dicat clita vel no.[/HiddenInitiallyforMobile]
Я удивлен, что не смог найти решение с плагином или очевидный способ сделать это. Возможно, я неправильно обдумываю это.
Думаю, вы можете установить класс для параграфа и задать для него отображение ‘none’ только на мобильном представлении.
Например,
@media screen and (max-width:479px){
.nameofclasswhichtheparagraphhas {display:none;}
}
И добавить кнопку ниже, но задать для нее отображение ‘none’ для пользователей ноутбуков. Например,
@media screen and (max-width:768px){
.theclassofthebuton {display:none;}
}
а затем использовать JavaScript для кнопки, например,
document.getElementById("buttonsID").onclick.style.display = "block";
Таким образом, кнопка будет видна только в мобильной версии и будет отображать контент при нажатии. Это то, что я тоже пытаюсь сделать, просто стараюсь помочь. В зависимости от сайта, я не знаю, можно ли это правильно реализовать. Но все равно дайте знать, если это было полезно.
Ответ или решение
Для решения задачи скрытия текстового контента на мобильных устройствах и его отображения только по запросу, можно воспользоваться комбинацией HTML, CSS и JavaScript. Основная идея заключается в том, чтобы использовать медиазапросы (media queries) для управления видимостью текста и элементов интерфейса на устройствах с разными размерами экрана. Рассмотрим эту задачу более подробно и последовательно.
Теория
С учетом того, что современные пользователи все чаще обращаются к веб-контенту через мобильные устройства, важно оптимизировать страницы так, чтобы они загружались быстро и выглядели компактно на маленьких экранах. Основная проблема, с которой мы сталкиваемся, это длинные текстовые фрагменты, которые могут занимать слишком много места на экране мобильного устройства, вызывая необходимость длительного прокручивания. Решение данной задачи заключается в введении механизма скрытия и последующего отображения текстового контента по запросу пользователя.
Пример
Предположим, у вас есть два абзаца текста, как в вашем примере:
<p>Lorem ipsum dolor sit amet, sit at voluptatum complectitur. Ei per diam case neglegentur. Sea in minim virtute nominati, id pro aperiam pericula, vim te ornatus inciderint.</p>
<p class="hidden-for-mobile">Vis nominati ullamcorper eu. Animal quaerendum pri at, in mea prodesset temporibus appellantur, dicat clita vel no.</p>
<button class="toggle-button">Показать больше</button>Во-первых, используем CSS, чтобы скрыть второй абзац на мобильных устройствах:
@media screen and (max-width: 767px) {
.hidden-for-mobile {
display: none;
}
.toggle-button {
display: inline-block;
}
}
@media screen and (min-width: 768px) {
.toggle-button {
display: none;
}
}Использование медиазапросов позволяет настраивать отображение элементов в зависимости от ширины экрана устройства. В этом примере, если экран устройства не превышает 767 пикселей, мы скрываем абзац с текстом и отображаем кнопку.
Приложение
Добавим JavaScript, который будет управлять отображением скрытого текста при клике на кнопку:
document.addEventListener('DOMContentLoaded', function () {
const button = document.querySelector('.toggle-button');
const hiddenText = document.querySelector('.hidden-for-mobile');
if (button && hiddenText) {
button.addEventListener('click', function () {
if (hiddenText.style.display === 'none' || hiddenText.style.display === '') {
hiddenText.style.display = 'block';
button.textContent = 'Скрыть';
} else {
hiddenText.style.display = 'none';
button.textContent = 'Показать больше';
}
});
}
});Этот скрипт сначала ждет, пока загрузится весь документ, а затем находит кнопку и скрытый текст. После этого он добавляет обработчик событий на кнопку, который переключает видимость текста и меняет текст кнопки в зависимости от текущего состояния.
Эта реализация позволяет скрывать длинные текстовые блоки на мобильных устройствах и дает пользователю возможность раскрыть текст по желанию. Это решение удобно тем, что не требует создания отдельных страниц для мобильных и настольных устройств и позволяет редакторам веб-контента легко помечать те части текста, которые должны быть скрыты на мобильных устройствах.
Заключение
Предложенный подход дает удобное и гибкое решение для управления контентом на страницах. Использование HTML для структурирования, CSS для стилизации и JavaScript для интерактивности позволяет создать современный и адаптивный пользовательский интерфейс. В то же время, важно помнить, что подобные решения стоит тестировать на различных устройствах и браузерах, чтобы убедиться в их корректной работе. Такая практика сделает ваше веб-приложение более удобным и доступным пользователям, независимо от того, с какого устройства они заходят на сайт.