web-dev-qa-db-ja.com

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未満になると、スライダーのヘッダーフォントのサイズが小さくなるはずです。

edit：サイズが640px未満の場合、JavaScriptを使用してクラスを追加するようにサイトが更新されました。そのクラスは常に小さいフォントサイズを使用します。これは、現在期待どおりに機能することを意味しますが、JavaScriptではなくCSSメディアクエリを使用するので、解決策を見つけたいと思います。

csssafarimedia-queries
16
joshcartme

波括弧が欠落していたことが判明したため、次のようなコードがありました。

@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が機能し始めます。他のブラウザはエラーを抑制しませんでした。そのため、追跡が非常に困難でした。

皆様のご協力に感謝します。

12
joshcartme

@mediaルールは通常のcssルールと同じ概念であり、最新のルールが最初のルールを上書きします。ただし、ルールが異なる場合でも、それを無効にすることはありません。

あなたはタイプすることによって回避策を作ることができました、このコードは単にウェブキットによって解釈されます

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