Safari en ignorant css max-width requêtes de média en dessous d'un certain point de

Je suis en train de travailler sur l'optimisation d'un site responsive et Safari (bureau et mobile) semble complètement ignorer les requêtes de média en dessous d'un certain point. J'ai le code suivant:

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

Firefox et Chrome à la fois de répondre de façon appropriée. Quelqu'un a une idée sur ce qui se passe?

Vous pouvez voir le site ici: http://kgillingham.webfactional.com. Ce qui doit arriver (et fonctionne sur FF et Chrome) est ce que le site devient de moins de 640px l'en-tête de la police dans le curseur doit devenir une plus petite taille.

modifier: Le site a été mis à jour pour utiliser javascript pour ajouter une classe lorsque la taille est inférieure à 640px. Cette classe utilise toujours la taille de la police. Cela signifie qu'il fonctionne comme prévu, mais je préfère utiliser les CSS media queries que le javascript donc je voudrais encore voir une solution.

J'ai donc été en mesure de reproduire ce dans Safari mais je n'ai aucune idée de pourquoi cela se passe. C'est comme si il commence juste ignorer les requêtes des médias quand il se sent comme il.
Ouais, c'est exactement ce qu'il semble pour moi, merci pour la confirmation que je ne suis pas fou!
Safari ont une certaine sorte de l'écran retina de chose?
Je ne pense pas que ce soit le cas, car il répond correctement à la 767px requête.
Pouvez-vous fournir un petit violon ?

OriginalL'auteur joshcartme | 2013-04-12

  1. 12

    S'avère que j'ai été absent un enchevêtrées corset, donc j'ai eu un code comme suit:

    @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 */
}

    De l'insertion de l'accolade manquante causé Safari pour commencer à travailler. Les autres navigateurs ne pas étouffer dans l'erreur qui est en partie pourquoi il était si difficile à retracer.

    Merci pour l'aide tout le monde, je me sens assez ridicule maintenant.

    Alors +1 pour avoir trouvé l'erreur, et -1 pour ne pas avoir posté l'extrait de code nécessaire pour le dépannage 😀
    J'ai effectivement posté le site web qui a été d'avoir de la difficulté de sorte que vous pourriez avoir regardé le CSS, donc je ne poste le code. Le code que j'ai posté ci-dessus est très épurée, le fichier css est 100s de lignes, de sorte qu'il n'aurait pas été pratique pour poster le tout ici.
    Commencer à utiliser un linter avec votre éditeur de code. 😀 j'utilise SublimeLinter avec Sublime Text 2, qui s'exécute CSSLint (et beaucoup d'autres linters) que j'type: m'a sauvé de moi-même plus de fois que je l'avais soins à retenir.
    Ne vous sentez pas ridicule — parfois, quand vous faites une erreur stupide et de le résoudre, vous aider d'une autre personne qui a fait la même stupide erreur (moi, dans ce cas) de résoudre leur problème. Merci!
    eu le même problème ici... chrome, na pas soins de l'absence de "brace". mais safari et android/iphone/ipod n'a pas aimé du tout..merci!

    OriginalL'auteur joshcartme

  2. 0

    @media règles sont les même concept que la normale des règles css, la dernière règle remplace la première. mais si une règle est différente, il ne serait pas annuler.

    vous pourriez faire une solution de contournement en tapant ce code serait juste interprété par webkits

    @media screen and (-webkit-min-device-pixel-ratio:0) {
    /* put webkit CSS here*/
}
    Je comprends cela et c'est pourquoi j'ai mis la plus petite largeur de après la plus grande, de sorte qu'il l'emporterait. Comme je l'ai dit je vais avoir pas de problème sous Firefox et Chrome, donc je ne pense pas que ce soit une commande de problème, il semble être particulier à Safari.
    Même sur iphone uniquement le CSS de la première requête de média est utilisé même si la 2ème requête de média doit être utilisé. Si vous ne l'avez pas déjà jeter un oeil à kgillingham.webfactional.com dans Safari (si vous en avez) pour voir le problème dans l'action. Je pense que c'est bizarre qu'il fonctionne dans Chrome depuis Chrome est aussi Webkit.
    Merci d'essayer de vous aider! Il s'avère qu'il y a une erreur dans mon css, j'ai posté une réponse de mon propre qui a résolu.

    OriginalL'auteur Ol Sen