Почему на IOS в мобильной версии другой цвет текста?
Привет, столкнулся с такой проблемой, в адаптиве. На андройде всё ок, но у заказчика айфон и номер телефона на сайте синего цвета
в дев тулзах всё норм, на андройде тоже всё, как должно быть
не понимаю, в чём проблема, попробовал уже даже явно, в каждом упоминании класса указывать цвет, не помогло
Код
<div class="phone_wrapper"> <img src="./IMG/phone-icon.svg" alt="phone-icon" class="phone-icon"> <span class="phone-number">+7(985)777-09-66</span> <a href="#callThePrice" class="call-back_btn">Обратный звонок</a> </div> |
<div class="phone_wrapper"> <img src="./IMG/phone-icon.svg" alt="phone-icon" class="phone-icon"> <span class="phone-number">+7(985)777-09-66</span> <a href="#callThePrice" class="call-back_btn">Обратный звонок</a> </div>
десктоп
.phone-number { margin-left: 5px; margin-right: 41px; color: #000; font-family: 'Manrope', sans-serif; font-size: 26px; font-style: normal; font-weight: 700; line-height: 20px; /* 76.923% */ letter-spacing: 0.52px; text-decoration: none; } |
.phone-number { margin-left: 5px; margin-right: 41px; color: #000; font-family: 'Manrope', sans-serif; font-size: 26px; font-style: normal; font-weight: 700; line-height: 20px; /* 76.923% */ letter-spacing: 0.52px; text-decoration: none; }
1750px
.phone-number { color: #000; margin-right: 30px; font-size: 22px; } |
.phone-number { color: #000; margin-right: 30px; font-size: 22px; }
1400px
.phone-number { color: #000; margin-right: 30px; font-size: 22px; } |
.phone-number { color: #000; margin-right: 30px; font-size: 22px; }
1100рх
.phone-number { color: #000; font-size: 14px; } |
.phone-number { color: #000; font-size: 14px; }
510рх
.phone-number { color: #000; font-size: 10px; } |
.phone-number { color: #000; font-size: 10px; }
Дополнительно:
У меня на айфоне черный. Заказчик пусть кеш почистит, если это есть до сих пор.
Вопрос не по теме - почему телефон не делаешь ссылкой? Некликабельные телеФоны -это не очень, особенно в адаптиве.
Было уже и решение найдено. Смотрите Как запретить iphone оформлять синим телефон?
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
На IOS в мобильной версии может быть другой цвет текста по нескольким причинам. Возможно, это связано с тем, что IOS использует свои собственные стили или настройки отображения текста, которые могут отличаться от стандартных стилей, применяемых на других устройствах.
Для того, чтобы изменить цвет текста на IOS в мобильной версии, вам следует добавить специальные стили или правила CSS, которые будут переопределять стандартные стили. Например, вы можете использовать медиа-запросы для определения устройства и применения соответствующих стилей.
Также, возможно, что проблема связана с тем, что на IOS используется другой шрифт или кодировка текста, что также может влиять на цвет текста. В этом случае, вам следует проверить используемый шрифт и его настройки, а также кодировку текста.
Если вы используете специфичные стили или скрипты на вашем сайте, то возможно, что они также влияют на отображение текста на IOS. В этом случае, вам следует проверить и исправить эти стили или скрипты, чтобы гарантировать правильное отображение текста на всех устройствах.
Наконец, рекомендуется также проверить совместимость вашего сайта с различными браузерами и устройствами, чтобы убедиться, что проблема с отображением текста на IOS не связана с другими факторами.
Приведу пример использования медиа-запроса для изменения цвета текста на IOS в мобильной версии:
@media only screen and (max-device-width: 768px) { p { color: blue; /* изменение цвета текста на синий для устройств с шириной экрана до 768px */ } }
Надеюсь, это поможет вам решить проблему с отображением текста на IOS в мобильной версии вашего сайта. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.