JavaScript Ticker не принимает настройки CSS на мобильных устройствах ⇐ CSS
JavaScript Ticker не принимает настройки CSS на мобильных устройствах
Я работаю над (примерно базовым) веб-сайтом, на котором бегущая строка отображается справа налево, и он отлично работает на рабочем столе; однако после загрузки и просмотра на мобильных устройствах (как в Chrome, так и в Safari на iOS) размер шрифта увеличивается как для моих значений , так и для . И ни один из них, похоже, не реагирует на какие-либо изменения в файле .css.
Вот HTML:
M 23 T 24 W 25 T 26 1 F 272 S 28 3 S 294 октябрь 2023 Открыто ежедневно с 9:00 до 20:00 [url=https:/ /forms.gle/kZH6Lq95EBdX2t5J6]Ответить[/url]
Вот CSS:
тело { маржа: 0 авто; } .тиккер-контейнер { фон: черный; ширина: 100%; переполнение: скрыто; маржа: 0 авто; } .ticker-текст { высота: 100%; белый цвет; пробел: nowrap; отображение: встроенный блок; семейство шрифтов: 'normalgrotesk', без засечек; шрифт-вариант-лигатуры: нет; размер шрифта: 4,5vw; высота строки: 1.125em; межбуквенный интервал: -.0025em; межсловный интервал: -.0015em; выравнивание текста: по левому краю; } /* --------- РАБОЧИЙ Стол --------- */ @media screen и (минимальная ширина: 1080 пикселей) { .тиккер-контейнер { фон: черный; ширина: 100%; переполнение: скрыто; маржа: 0 авто; } .ticker-текст { высота: 100%; белый цвет; пробел: nowrap; отображение: встроенный блок; семейство шрифтов: 'normalgrotesk', без засечек; шрифт-вариант-лигатуры: нет; размер шрифта: 4vw; высота строки: .9625em; межбуквенный интервал: -.0025em; межсловный интервал: -.0015em; выравнивание текста: по левому краю; } } Вот JS:
var ширина, ширина контейнера, влево, путь = 1; $(документ).ready(функция(e){ ширина = $('.ticker-text').width(); Containerwidth = $('.ticker-container').width(); слева = ширина контейнера; галочка(); }); функция тик() { если (путь) { если (--left ширина контейнера){ влево = -ширина; } } $(".ticker-text").css("margin-left", left + "px"); если (x.matches) { setTimeout (галочка, 9); // Рабочий стол } еще { setTimeout (галочка, 25); // Мобильная версия } } var x = window.matchMedia("(минимальная ширина: 1080 пикселей)") Tick(x) // Вызов функции прослушивания во время выполнения x.addListener(tick) // Подключаем функцию прослушивания при изменении состояния Ниже приведены изображения результатов на настольных компьютерах и мобильных устройствах (Chrome). Рабочий стол Скриншот рабочего стола: выглядит и работает отлично
Мобильный Скриншот мобильного устройства — увеличенный текст тикера (как мелкий, так и крупный текст)
Будем рады любой информации! Я искал-ищу и не могу понять, в чем дело...
Я работаю над (примерно базовым) веб-сайтом, на котором бегущая строка отображается справа налево, и он отлично работает на рабочем столе; однако после загрузки и просмотра на мобильных устройствах (как в Chrome, так и в Safari на iOS) размер шрифта увеличивается как для моих значений , так и для . И ни один из них, похоже, не реагирует на какие-либо изменения в файле .css.
Вот HTML:
M 23 T 24 W 25 T 26 1 F 272 S 28 3 S 294 октябрь 2023 Открыто ежедневно с 9:00 до 20:00 [url=https:/ /forms.gle/kZH6Lq95EBdX2t5J6]Ответить[/url]
Вот CSS:
тело { маржа: 0 авто; } .тиккер-контейнер { фон: черный; ширина: 100%; переполнение: скрыто; маржа: 0 авто; } .ticker-текст { высота: 100%; белый цвет; пробел: nowrap; отображение: встроенный блок; семейство шрифтов: 'normalgrotesk', без засечек; шрифт-вариант-лигатуры: нет; размер шрифта: 4,5vw; высота строки: 1.125em; межбуквенный интервал: -.0025em; межсловный интервал: -.0015em; выравнивание текста: по левому краю; } /* --------- РАБОЧИЙ Стол --------- */ @media screen и (минимальная ширина: 1080 пикселей) { .тиккер-контейнер { фон: черный; ширина: 100%; переполнение: скрыто; маржа: 0 авто; } .ticker-текст { высота: 100%; белый цвет; пробел: nowrap; отображение: встроенный блок; семейство шрифтов: 'normalgrotesk', без засечек; шрифт-вариант-лигатуры: нет; размер шрифта: 4vw; высота строки: .9625em; межбуквенный интервал: -.0025em; межсловный интервал: -.0015em; выравнивание текста: по левому краю; } } Вот JS:
var ширина, ширина контейнера, влево, путь = 1; $(документ).ready(функция(e){ ширина = $('.ticker-text').width(); Containerwidth = $('.ticker-container').width(); слева = ширина контейнера; галочка(); }); функция тик() { если (путь) { если (--left ширина контейнера){ влево = -ширина; } } $(".ticker-text").css("margin-left", left + "px"); если (x.matches) { setTimeout (галочка, 9); // Рабочий стол } еще { setTimeout (галочка, 25); // Мобильная версия } } var x = window.matchMedia("(минимальная ширина: 1080 пикселей)") Tick(x) // Вызов функции прослушивания во время выполнения x.addListener(tick) // Подключаем функцию прослушивания при изменении состояния Ниже приведены изображения результатов на настольных компьютерах и мобильных устройствах (Chrome). Рабочий стол Скриншот рабочего стола: выглядит и работает отлично
Мобильный Скриншот мобильного устройства — увеличенный текст тикера (как мелкий, так и крупный текст)
Будем рады любой информации! Я искал-ищу и не могу понять, в чем дело...
-
- Похожие темы
- Ответы
- Просмотры
- Последнее сообщение