URL скопирован в буфер обмена!
Как ограничить показ сайта на указанных экранах с показом заглушки в Tilda
Модификация позволяет ограничить отображение сайта на выбранных разрешениях экрана и вместо контента показывать блок-заглушку. Например, можно скрыть сайт на горизонтальных мобильных устройствах и вывести сообщение «Переверните телефон вертикально».
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
ID Zero Block
Скрываем адаптив с экрана
Скрываем адаптив до экрана
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD130--><script>
document.addEventListener("DOMContentLoaded", function() {
function TCDcheckdispl(TCTildaZaeropopup) {
const TCDblockid = document.querySelector(TCTildaZaeropopup);
if (!TCDblockid) return;
const screenWidth = window.innerWidth;
if (screenWidth >= 480 && screenWidth <= 959) {
Object.assign(TCDblockid.style, {
display: 'block',
position: 'fixed',
top: '0',
left: '0',
width: '100%',
zIndex: '9999',
opacity: '0',
transition: 'opacity 0.3s ease'
});
Object.assign(document.body.style, {
overflow: 'hidden',
position: 'fixed',
width: '100%'
});
setTimeout(() => {
TCDblockid.style.opacity = '1';
}, 300);
} else {
TCDblockid.style.display = 'none';
TCDblockid.style.opacity = '0';
Object.assign(document.body.style, {
overflow: '',
position: '',
width: ''
});
}
}
const TCTildaZaeropopup = '#rec1333073961';
TCDcheckdispl(TCTildaZaeropopup);
window.addEventListener('resize', () => TCDcheckdispl(TCTildaZaeropopup));
window.addEventListener('orientationchange', () => TCDcheckdispl(TCTildaZaeropopup));
});
</script>
<script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>
1. Создаем Zero Block с высотой 100% и размещаем в блоке контент который будем показывать как заглушку;
2. Копируем id блока и вставляем в генератор кода;
3. Указываем в генераторе диапазон экранов, на которых должна отображаться заглушка. Для этого заполняем поля
"Скрываем адаптив с экрана" и "Скрываем адаптив до экрана"
4. Копируем готовый код и вставляем в HTML блок Т123.
2. Копируем id блока и вставляем в генератор кода;
3. Указываем в генераторе диапазон экранов, на которых должна отображаться заглушка. Для этого заполняем поля
"Скрываем адаптив с экрана" и "Скрываем адаптив до экрана"
4. Копируем готовый код и вставляем в HTML блок Т123.
Чтобы увидеть работу мода, откройте сайт на телефоне и переверните устройство в горизонтальное положение.
Пожалуйста, поверните телефон вертикально, чтобы увидеть сайт.
