Mobile changement d'orientation de ne pas appliquer la CSS

Je me suis mise à l'essai d'un site web que je suis en développement et je suis en utilisant les media queries.

Quand je l'ai tester et de redimensionner la page dans un navigateur, tout est bon.

Mais quand je test sur mon mobile, je rencontre un problème lorsque je change l'orientation du téléphone.

Si je charge la page dans landscape mode, la bonne CSS sont appliquées.

Lorsque je change de portrait, les CSS sont également correctes.

Mais si je retourne à landscape, le portrait classes css sont toujours appliquée.

Je suis en utilisant ces metatags 

<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Et dans mes requêtes de média, j'ai

@media 
only screen and (max-width: 610px),
only screen and (max-width: 610px) and (orientation:landscape) { ... }

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

J'ai alerté l'appareil largeur assurez-vous que c'est ok et dans landscape mode c'est 598px large et portrait est 384px

Je suis sur un Nexus 4 (Android 4.3)

Comment se fait le CSS ne sont pas appliquées une fois que j'ai changer l'orientation?

EDIT:
Si je charge le site portrait et puis changer pour la landscape, le CSS ne sont pas appliquées.
C'est comme si une fois qu'il va à la plus petite résolution, il ne peut pas revenir en arrière.

Êtes-vous en l'actualisant à chaque fois? Si pas, je suis sûr que vous avez à faire pour l'adapter à l'aide de javascript
J'étais sûr que vous auriez à utiliser JS pour réinitialiser le css. Utilisation de jquery.resize() pour fixer le css sur l'orientation de la maj
Non, je ne suis pas frapper d'actualisation, quand j'ai cliquer sur "actualiser", le css s'affiche bien... c'est quand j'ai changer d'orientation une fois que la page est chargée.
Je ne crois pas que vous avez à rafraîchir, essayez de redimensionner votre fenêtre de navigateur.
sur jquery.resize(), j'ai alerté $(window).width() et je reçois la bonne nouvelle de la largeur de la redimensionner() se déclenche quand je change d'orientation.

OriginalL'auteur VVV | 2013-09-11

  1. 4

    Sur mon Nexus 4, j'ai quelque chose qui ressemble à ceci et cela semble fonctionner pour votre cas de test:

    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<meta name='viewport' content='width=device-width'>

    Et je ne fais aucune référence à l'orientation dans les médias de la requête, par exemple:

    @media only screen and (max-width: 610px) { /* Some CSS here */ }

    EDIT: on dirait que vous avez à mettre max-device-width après l'autre, max-width choses en termes de requêtes de média. Pour citer vyx.ca dans les commentaires ci-dessous...

    Viens de trouver mon problème. Remarquez comment je définis le "max-device-width" avant le reste. Si j'ai mis cette dernière condition, il fonctionne. 'max-device-width" est utilisé pour l'affichage retina.

    Je l'ai juste essayé. J'obtiens le même problème.
    Est la procédure pour obtenir le bug comme suit: 1. Avoir le téléphone en mode paysage, 2. appuyez sur actualiser pour charger la page, 3. Tournez le téléphone portrait, 4. Tournez le téléphone paysage, 5. Bug apparait. Suis-je la corriger?
    oui, c'est correct.
    Ne vous laissez dans les autres méta-données (MobileOptimized ainsi que les autres viewport de données) ou le supprimer?
    Je les ai retirées pour tester ce que vous m'avez donné. Cela n'a pas fonctionné, j'ai essayé différentes combinaisons, ne fonctionne toujours pas.

    OriginalL'auteur David

  2. 3

    Mon problème est lié à l'ordre de mon CSS demandes.

    J'ai utilisé pour définir 'min-device-width' avant le reste.

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

    Mais si je le définir dernier, il fonctionne.

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

    Pour plus d'informations à propos de l'appareil-largeur:- découvrez cette question

    eu un problème similaire, je l'ai résolu en ajoutant max-device-x avec le max-x que j'utilisais avant. cheers

    OriginalL'auteur VVV

  3. 2

    ce code a fonctionné pour moi:-

      @media only screen and (min-width: 240px) and (max-width: 520px), only screen and (min-device-width: 240px) and (max-device-width: 520px) and (orientation:portrait)
{
    body
    {
        background:#009;
    }
}

@media only screen and and (max-width: 610px), only screen and (max-device-width: 610px) and (orientation:landscape)
{
    body
    {
        background:#993;
    }
}

    OriginalL'auteur Bijay Mishra

  4. 1

    Vos requêtes de média se chevauchent. Max-width de 520 sera également vrai de max-largeur 610. Aussi, vous avez un OU dans le paysage, il est donc possible que ce soit vrai dans le Portrait si max-largeur 610 est vrai. Le chevauchement des requêtes de média comme CSS en ce qu'elle cascades de sorte que vous aurez un comportement étrange.

    Je ne vois aucune référence à l'orientation:portrait dans vos requêtes alors, comment savez-vous portrait classes sont appliquées. En général, vous voulez en faire l'un ou l'autre ou quand on fait de l'orientation des requêtes.

    Également essayer d'ajouter des min-width pour enlever toute la largeur de chevauchement

    @media only screen and (orientation:landscape) { ... }

    @media only screen and (orientation:portrait) { ... }

    Merci. Je sais que sur le chevauchement, et dans ce cas c'est ok. Mais le truc, c'est que mon appareil est de 598 (Nexus 4) de sorte que les classes de max-width 520 ne doit pas être appliquée.

    OriginalL'auteur Alex Reynolds

  5. 1

    Bien connu quiksmode site définit device-width /appareil-hauteur fonctionnalités de médias comme statique.

    Ces requêtes de média sont statiques une fois déterminé; c'est à dire qu'ils ne font pas de mise à jour de la valeur qu'ils vérifié contre lorsque le dispositif d'orientation est modifiée. (Donc, si vous démarrez en mode portrait, et puis de passer en mode paysage, le portrait device-width compte toujours. Le rechargement de la page résout ce.)

    C'est pourquoi l'aide de max-device-width est encore appliquée après un changement d'orientation.

    OriginalL'auteur Eduard