Problème Css de 100% de largeur uniquement lors d'un safari mobile
Voici le site en question: www.prestigedesigns.com
Le problème est que mon en-tête et mon pied de page ne s'étireront pas à 100%, mais uniquement sur iPhone/iPad.
J'ai essayé ce que je pense être tout et je pourrais vraiment utiliser de l'aide? Y a-t-il quelqu'un d'autre qui a un problème similaire?
Merci.
C'est une sorte de problème de fenêtre avec Safari mobile, mais vous pouvez obtenir le même effet en réduisant la largeur de la fenêtre du navigateur de votre bureau et en faisant défiler vers la droite, vous verrez que votre arrière-plan commence à disparaître.
En effet, lorsque vous définissez width:100% à ton #top et #header divs, vous leur dites de redimensionner à la largeur de l'élément conteneur, qui dans ce cas est la fenêtre du navigateur (ou la fenêtre d'affichage). Vous ne leur dites pas de redimensionner le contenu qu'il contient.
La largeur de fenêtre par défaut de Mobile Safari est 980px, donc il utilise 980px comme largeur de l'élément conteneur pour vos divs. C'est pourquoi votre mise en page, qui est d'environ 1050 px, obtient son arrière-plan coupé.
Vous pouvez résoudre ce problème pour Safari mobile en définissant directement sa fenêtre d'affichage (lire Documents d'Apple ), ou en ajoutant min-width: largeur de votre dessin en pixels ; à votre body. Mobile Safari utilisera le min-width est utile pour définir sa fenêtre d'affichage, et cela l'empêchera également de se produire dans les navigateurs de bureau.
Configurez la fenêtre pour adapter votre page sur n'importe quel appareil.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Définissez min-width:(Width of your design)px; dans le fichier CSS et ce problème sera résolu.
il n'est pas attribué width: 100% l'en-tête devient width: 1009px; même chose avec le pied de page.
Juste un pressentiment car je ne peux pas réellement le tester, mais l'élément pied que vous avez dans la barre de pied est défini sur une largeur absolue en pixels tandis que la barre de pied est définie sur% - la même chose avec votre élément d'en-tête - essayez de les changer également en%?