l'iPhone est ignorant CSS media queries. Fenêtre d'affichage de la balise présent. Travail en bureau

EDIT: Ceci est une recrue totale erreur de ma part. J'ai été l'édition d'un autre fileset à celle que j'ai été le tester. Sincères excuses à tous ceux qui ont répondu à m'aider. J'ai upvoted toutes les réponses que j'ai au moins appris un peu plus sur les requêtes de média de vous tous, mais aucun n'a fourni la réponse. Conseils svp sur ce que faire maintenant avec ce billet?

C'est une longue rubrique sur le site, mais je n'ai pas vu la solution pour ce problème.

La viewport balise est présente. Je suis à l'aide d':

<meta name="viewport" content="width=device-width,initial-scale=1.0">

Quand je redimensionner la fenêtre du navigateur de google Chrome, il fonctionne très bien, et je peux le voir claquer à nouveau des points d'arrêt qu'ils sont atteint, mais l'iPhone Safari affiche en haut à gauche du site, avec aucun signe de ramasser toutes les requêtes.

Le CSS requête de Média que j'utilise pour iPhone portrait est:

@media (max-width: 321px) { }

Je suis en utilisant Bootstrap et MOINS, de sorte que mes requêtes de média sont à la fin de l'styles.

Désolé, je ne suis pas dans une position de partage de code sur ce point. C'est un étrange — j'espère que quelqu'un peut voir si il y a quelque chose que j'ai peut-être manquant.

MODIFIER

Voici un exemple très simple qui fonctionne sur mon iPhone. Je peux faire tourner de portrait à paysage et le bg de la couleur va changer, alors il n'y a rien de mal à la requête de média que j'utilise:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style type="text/css">

        body
        {
            background: blue;
        }

        @media (max-width: 321px)
        {
            body
            {
                background: red;
            }
        }
    </style>
</head>
<body>
    Here is my content...
</body>

max-width vs max-device-width?
Merci. Non, cela ne fonctionne pas.
Si cet exemple minimal fonctionne mais l'un n'est pas le cas, alors peut-être que vous avez une fracture de la CSS quelque part ou plusieurs media-queries que substituant les uns des autres
Mes excuses les plus sincères: Ma page a été pointant vers une URL différente de celle que je travaillais. Le Rookie de l'erreur. Désolé pour perdre votre temps sur le travail que vous mettez dans la pour m'aider.
Mes excuses les plus sincères: Ma page a été pointant vers une URL différente de celle que je travaillais. Le Rookie de l'erreur. Désolé pour perdre votre temps sur le travail que vous mettez dans la pour m'aider.

OriginalL'auteur BB Tony | 2013-04-30

  1. 10

    Modifier
    Ce qui a résolu ce qui pour moi est un double ("ou") requête des médias, pour max-device-width et max-width. C'est comme David Rönnqvist la première suggestion, mais c'était seulement en train de mettre max-width, max-device-width à la FOIS dans la requête de média qui a fonctionné pour moi.

    @media screen and (max-device-width:640px), screen and (max-width:640px) {
    /* styles here */
}

    BBTony, j'espère que cela fonctionne pour vous.

    Je vais garder le ci-dessous, car il est une description plus complète du problème que j'ai trouvé n'importe où ailleurs. Je n'aimais pas ma première solution (en dessous de la ligne) tellement que j'ai re-fait des recherches pour la millième fois - grâce à ce post qui m'a donné la solution ci-dessus sans que le ridicule !notices.

    Edit: ça marchait aussi, mais c'est très inélégant: Mettre "!important" sur chaque ligne de la requête de média conditionnelle CSS.

    J'étais réticent à proposer que comme un réponse, mais après l'avoir arraché à la recherche de cette pour 3 jours, c'était la première chose qui a fonctionné pour moi.

    Description complète du problème: j'ai eu des symptômes similaires à ceux BBTony. J'ai eu de la fenêtre d'affichage de la balise (et je l'ai eu au-dessus de la feuilles de style comme recommandé). 

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

    Ma requête des médias, destiné à attraper n'importe quel petit appareil, a été ignoré par un iPhone 3gs sous iOS 5.1, mais les médias, de même que la requête a été correctement prise par un iPhone 4s sous iOS 6. 

    @media only screen and (max-device-width:640px) {
   /* many styles here */
}

    Très curieusement, alors que la plupart des déclarations dans les médias de la requête ont été ignorés par l'ancien iPhone, certains d'entre eux ont été être respectés. Le plus récent iPhone 4s cependant respecté de tous les CSS à l'intérieur de la requête de média, comme prévu. Sur Safari bureau, les requêtes de média tout a parfaitement fonctionné, accrochage à la fois les points d'arrêt (il y en a 2).

    Je linted mon CSS à travers différents linters, après la lecture de ici CSS erreurs peuvent causer des navigateurs mobiles d'ignorer les requêtes de média. Après avoir fait certain que mon CSS est conforme, et juste pour l'enfer de celui-ci, j'ai mis !d'importantes déclarations après chaque ligne de CSS à l'intérieur de la requête de média - comme 80-100 !notices.

    Presto.

    Je ne peux pas vous dire comment mad il m'a fait que cette même travaillé, et je suis curieux de savoir pourquoi l'ancien iphone serait seulement le respect de la condition avec !important dans ce cas.

    Merci pour la recherche dans ce. Je suis sur ce projet pour le moment, mais sera de retour, je vais donc porter votre solution à l'esprit, alors.
    Commentaire édité ci-dessus. Une fois que j'avais correctement digéré votre réponse. D'excuses...
    A eu un problème similaire où une règle css n'a pas pris effet lors de l'iphone a été renversé à l'horizontale de l'état, uniquement lorsque la page a été rafraîchie fait activer la règle css. Ce fixe pour moi!

    OriginalL'auteur nimmolo

  2. 2

    Que je l'ai déjà utilisé pour mon site et cela a fonctionné comme iPhone spécifiques media queries pour moi

    @media only screen 
   and (max-device-width: 480px) 
   and (orientation:landscape) {
    /* iPhone landscape */
}

@media only screen 
   and (max-device-width: 480px) 
   and (orientation:portrait) {
    /* iPhone portrait */
}

    Réponses à d'autres questions comme ceci semblent suggérer que 480px pour la max-device-width est ce que vous devriez aller pour votre requête de média.

    Merci. Qui ressemble à droite. Plus je regarde, plus je pense que je suis le déclenchement de certains bug rare.
    comme c'est votre première question ici) si une réponse est utile, pensez upvoting. Si cela résout votre problème, en le marquant comme "accepté". Mais ne vous contentez pas de le faire parce que moi ou quelqu'un d'autre vous a dit. Si votre question n'est toujours pas de réponse, vous pouvez modifier avec plus de détails pour nous aider à comprendre le problème.
    Merci pour les conseils. Encore à apprendre les ficelles du métier. Je vais le faire. Merci. Toujours à la recherche en elle. Vais poster une réponse moi-même quand je trouve la solution.

    OriginalL'auteur David Rönnqvist