Les Media queries ne fonctionne pas sur Iphone, mais bien sur navigateur redimensionner

Salut je suis actuellement en utilisant un passe-partout thème appelé l'Os sur un WordPress, mais je vais avoir des problèmes à faire le menu responsive travail sur mon Iphone. Quand j'ai redimensionner manuellement le menu semble fonctionner

la requête de média jutilise est

@media screen and (min-width: 960px) {

le site im essayant de se rendre au travail est ici:lien

Toute aide serait grandement apprécié que je suis allé sur le thème de l'écrivain et qu'il n'a pas répondu dans les jours

  • Avez-vous d'inclure les media="screen" dans la tête du code html ? (dans <script>)
InformationsquelleAutor Matt James | 2012-11-05
  1. 15

    avez-vous utilisé la meta viewport objet? Mis cela dans la tête de votre document

    <meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
    • Excellent c'est la réponse dont j'avais besoin. merci beaucoup!
    • Merci pour votre réponse, Cela fonctionne à présent sur l'IPhone, mais a l'IPhone et le petit menu de l'appareil sur le plus grand site de Bureau lorsque sur IE8!! Je vais regarder dans ce moment, mais toutes les idées comment résoudre ce problème? peut-être une feuille de style juste pour ce navigateur.
    • Pas de problème, parce que ie ne prend pas en charge les requêtes des médias et donc de tous les styles, après votre premier @media sera ignorée, la meilleure correction j'ai vu les médias requêtes de travail dans ie est un peu de javascript code.google.com/p/css3-mediaqueries-js j'espère que cela aide
    • Grâce KZA absolue ledgend!! J'ai de la Marge, sur mon Iphone que je ne peux pas me débarrasser de maintenant. Je voudrais que mon contenu à 100% en largeur, mais après margin:0px tout ce que j'ai encore une marge de frontière>? andy conseils?
    • Voici une capture d'écran optimise-website-marketing.com/wp-content/themes/bones/images/...
    • il est un outil pour iphone pour redimensionner le navigateur et changer l'user-agent qui peut être utile dans les essais ceci: itunes.apple.com/us/app/browser-resizer/id648937670?mt=8
    • Salut, c'est une bonne pratique de ne pas l'utiliser au maximum-scale=1 comme il unables utilisateurs de zoomer.

    InformationsquelleAutor Kza
  2. 0

    Je viens de tomber sur un problème où, quand j'ai chargé ma feuille de style avec cette:

    <link src="mobile.css" media="only screen and (min-width: 400px)" />

    et puis à l'intérieur de mobile.css, j'ai eu un couple de styles de ce genre:

    @media screen and (min-width: 400px) {
    body {
        background: red;
    }
}

h1 {
    color: blue;
}

    et plusieurs appareils (iPhone, iPad - avec un autre point d'arrêt bien sûr, et le Galaxy Nexus) n'a pas vu le background:red; règle ("nested" media query), seulement ceux qui ont été à l'extérieur de la "inline" media query (h1). Chrome et les autres navigateurs ont été bien avec elle, cependant.

    • À ce point, il a l'impression de styles dans une feuille de style de jeu pour media="screen", de sorte qu'ils ne fonctionnent pas.
    • J'ai testé ce nouveau récemment et n'ont pas ce problème, dans iPhone6/iOS8/Chrome, iPhone6/iOS8/Safari, Samsung S5/4.4.2/Chrome, Samsung S5/4.4.2/Stock, Samsung S5/4.4.2/Firefox, iPad1/iOS5/Safari, Nexus7/4.4.4/Chrome, HTC One/4.4.2/Chrome, S2 Tablette/4.0/Chrome,S2 Tablette/4.0/Stock, S2 Tablette/4.0/Firefox
    InformationsquelleAutor allicarn
  3. 0

    Cela m'a sauté aux yeux aussi bizarre:

    @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { 
    ... 
}

    Je pense que cela doit être

    @media only screen and (max-width: 480px), 
@media only screen and (max-device-width: 480px) { 
    ... 
}

    ou...

    @media only screen and (max-width: 480px) and (max-device-width: 480px) { 
    ... 
}

    Vous pourriez aussi envisager de passer d'XHTML HTML5 pour votre doctype.

    InformationsquelleAutor Chris Ferdinandi