JavaScript Ticker не принимает настройки CSS на мобильных устройствах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). Рабочий стол Скриншот рабочего стола: выглядит и работает отлично

Мобильный Скриншот мобильного устройства — увеличенный текст тикера (как мелкий, так и крупный текст)

Будем рады любой информации! Я искал-ищу и не могу понять, в чем дело...
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «CSS»