Safari игнорирует запросы массовой информации css max-width ниже определенной точки

Я работаю над оптимизацией реагирующего сайта, и Safari (как настольный, так и мобильный), кажется, полностью игнорирует медиа-запросы ниже определенного момента. У меня есть код вроде:

@media screen and (max-width: 767px){
    /* Safari responds to css here */
}
@media screen and (max-width: 640px){
    /* css here is ignored by Safari */
}

Firefox и Chrome оба отвечают соответствующим образом. Кто-нибудь есть идеи о том, что происходит?

Вы можете увидеть сайт здесь: http://kgillingham.webfactional.com. Что должно произойти (и работает в FF и Chrome), так это то, что, когда сайт становится меньше 640px, шрифт заголовка в слайдере должен стать меньшим размером.

изменить. Теперь сайт обновлен, чтобы использовать javascript для добавления класса, когда размер меньше 640 пикселей. Этот класс всегда использует меньший размер шрифта. Это означает, что он работает так, как ожидалось, но я бы скорее использовал CSS-запросы для СМИ, чем javascript, поэтому мне все равно хотелось бы увидеть решение.

Ответ 1

Оказывается, мне не хватало скользящей фигурной скобки, поэтому у меня был код, похожий на следующий:

@media screen and (max-width: 767px){
    /* lots of css */
    .some_selector { padding: 20px; /*<---- missing squiggly brace*/
    /* more css */
}
@media screen and (max-width: 640px){
    /* lots more css */
}

Вставка отсутствующей скобки заставила Safari начать работу. Другие браузеры не задушили ошибку, отчасти потому, что ее было трудно отследить.

Спасибо за помощь всем, теперь я чувствую себя довольно глупо.

Ответ 2

Правила @media - это то же понятие, что и обычные правила css, последнее правило перезаписывает первый. но если правило отличается, оно не отменяет его.

вы можете сделать обходной путь, набрав, этот код будет просто интерпретирован webkits

@media screen and (-webkit-min-device-pixel-ratio:0) {
    /* put webkit CSS here*/
}