Largeur de 100% ne fonctionne pas sur iOS

Pour une certaine raison, et sur l'iphone, mon pied de page ne veut pas s'étendre à travers l'écran, même si c'est du css est mis à width: 100%. Vous pouvez voir un exemple de mon pied de page ici: http://pixelcakecreative.com/tla2/

Mon css pour le pied de page est comme suit:

#footer{ width:100%; margin-top:100px; position:relative; clear:left; background:#4c4c4c; float:left; padding:30px 0;}

Ce problème s'applique UNIQUEMENT aux appareils iOS, comme la mise en page fonctionne parfaitement sur les navigateurs PC. Une idée de comment résoudre ce problème? J'ai essayé tout ce que je peux penser. Merci!

  • comme il s'avère, la solution est de changer la fenêtre d'affichage de la largeur de la largeur du site web contenant: <meta name="viewport" content="width=1010" /> cependant, il semble qu'il se charge bien, et puis en une fraction de seconde plus tard, l'iphone échelles vers le bas juste un peu donc il y a une pièce supplémentaire vers la droite. Consultez le site pour voir ce que je veux dire
InformationsquelleAutor JCHASE11 | 2012-01-17
  1. 17

    Essayer en simplifiant votre meta name fenêtre d'affichage (au moins pour iOS) à la ligne suivante:

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

    Les attributs de moins que ce que vous êtes normalement, dit avoir, je sais, mais cela a fonctionné pour mes projets mobiles.

    Maintenant, en regardant de plus près, la majorité si votre site est "centre", et puis vous avez l'emballage et le pied de page.

    Le code utilisé pour l'emballage et le pied de page est différente. Wrapper est fixe width:941px; alors que le pied de page juste a width:100%. La majorité des éléments à l'intérieur wrapper ont width:100% mais qui ne fonctionne que parce que wrapper a width: 941px.

    Donc, soit vous essayez d'ajouter que même largeur et de rembourrage pour le pied de page {width:941px; padding:30px 34px;} ou quelque chose le long de ces lignes OU

    Vous jetez un pied de page à l'intérieur d'un semblable wrapper avec un fixe, avec, rembourrage, etc et puis laissez laissez-pied de conserver width:100%;

    • lequel des deux parties fixe pour vous? Je suppose que le dernier.
    InformationsquelleAutor Sotkra
  2. 1

    votre div#innerFooter est d'empêcher le pied de page à l'échelle correctement, réglez la largeur à 100% et cela devrait résoudre le problème

    #innerFooter {width:100%}
    • Non, cela ne marche pas à le résoudre, en fait plus de vis des. Il semble que le problème est le pied de page, pas le innerFooter.
    • il a à voir avec la largeur de la fenêtre d'affichage. Actuellement, il est fixé à: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    InformationsquelleAutor David Nguyen
  3. 0

    Vous êtes probablement manquant mobile de la fenêtre d'affichage de la balise meta

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

    C'est nécessaire pour les appareils mobiles comme iOS correctement l'échelle de la page à la fenêtre d'affichage. Vous pouvez lire à ce sujet ici ou ici.

    • J'ai déjà que dans ma tête. On dirait qu'il charge d'abord, puis supprime une bonne partie du pied de page...étrange.
    • Supprimer la fin / sur votre ouverture de balise html. Qui ne leur appartient pas.
    • Bonne suggestion, mais qui ne l'a pas fait
    InformationsquelleAutor Rob
  4. 0

    Essayez de laisser initiale de l'échelle et du maximum de l'échelle de vide et de l'utilisation par l'utilisateur de défilement=non. Les deux premières laisser la même erreur dans un projet qui est le nôtre avec le responsive design. Je n'ai pas compris pourquoi encore.

    • non, ne l'a pas fait!
    InformationsquelleAutor Florian Rachor