Блог

Главная - Вопросы по программированию - Мой слайдер некорректно работает на iPad и в режиме Kindle Fire Linux

Мой слайдер некорректно работает на iPad и в режиме Kindle Fire Linux

#javascript #css #asp.net-mvc #slider

#javascript #css — код #asp.net-mvc #слайдер

Вопрос:

У меня есть проблема на моем сайте электронной коммерции под названием https://www.bencetupperware.com / Это было написано с MVC.Net . В верхней части страницы есть ползунок. Я проверил сайт в Mozilla в режиме разработки ответов. Он корректно работает на других платформах, таких как iphone 6/7/8, galaxy, но проблема заключается в iPad и Kindle Fire Linux. У кого-нибудь есть идеи?

Комментарии:

1. Привет, я видел проблему и опубликовал пару изображений, чтобы продемонстрировать ее, но не могли бы вы добавить к своему вопросу немного минимального кода, который также демонстрирует проблему — возможно, извлеките только один пример, который показывает изображения, которые я показал, поскольку трудно посоветовать иначе.

2. Я просмотрел ваш сайт, и было довольно легко увидеть проблему, поэтому опубликовал ответ. Я нашел это, используя инструменты разработчика в браузере Chrome в Windows и постепенно уменьшая размер окна (также помогло установить продолжительность анимации на что-то большое, чтобы все не менялось, когда я на них смотрел). Я не уверен, что iPad не принимает неверный медиа-запрос, но даже если он установит размер шрифта на что-то меньшее, это заставит его работать.

3. Привет, Хаворт, спасибо за ваш интерес, я думаю, что есть проблема с разрешением. Когда я смотрю на iPad в режиме адаптивного дизайна, он должен быть 768×1024. Что именно мне нужно изменить? Вы можете мне помочь?

4. Привет, вы пробовали уменьшить размер шрифта там, где я указал в своем ответе, что я должен был сделать его меньше?

5. Я обновил свой ответ, чтобы показать, что именно вам нужно изменить для достижения ожидаемого результата. Как вы говорите, есть проблема с iPad, я не понимаю, почему этот размер носителя подбирается на iPad. Не могли бы вы изменить свой сайт, чтобы я мог попробовать его на настоящем iPad? Спасибо.

Ответ №1:

ОБНОВЛЕНО: что нужно изменить: измените этот медиа-запрос на меньший размер шрифта (он был 45 пикселей):

 @media only screen and (min-width: 576px) and (max-width: 767px) {
    .slider-content-1 h3 {
        font-size: 16px;
    }
}

Вам нужно посмотреть font-size настройки в файле стиля css. Для некоторых экранов меньшего размера выбираются довольно крупные шрифты. Я изменил размер окна в Chrome на ноутбуке и обнаружил, что мне нужно уменьшить размер шрифта h3, чтобы он не был настолько большим, чтобы он расширялся под другими полями.

     .slider-content-1 h3 {
        font-size: 45px;
        font-family: "TupperPRO", cursive;
        color: #D3007E;
        margin: 0;
        font-weight: bold;
        font-style: normal;
    }

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .slider-content-1 h3 {
        font-size: 70px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .slider-content-1 h3 {
        font-size: 65px; /* THIS IS LARGE */
    }
}

@media only screen and (max-width: 767px) {
    .slider-content-1 h3 {
        font-size: 18px; /* THIS GETS OVERWRITTEN BY THE NEXT ONE FOR SOME DEVICES */
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .slider-content-1 h3 {
        font-size: 45px;/* I NEEDED TO MAKE THIS SMALLER */
    }
}

Это показывает сайт на ноутбуке (Chrome) и на реальном iPad (Safari IOS 14), чтобы показать проблему.

введите описание изображения здесь

введите описание изображения здесь