Site web montre un espace blanc sur le côté droit de l'écran de l'iPhone

J'ai un problème sur http://eiglaw.com -- environ 25px wide white space/frontière est visible sur le côté droit de l'écran de l'iPhone. J'ai étudié le problème sur stackoverflow et ces messages sont pertinents, mais quand j'ai essayé les différentes solutions proposées, je n'ai pas été en mesure de résoudre le problème:

Site web réactif sur iPhone indésirables à l'espace blanc sur la rotation de paysage à portrait

Site web de l'organisme de rendu en arrière-plan d'un droit marge blanche de l'iPhone Safari

L'espace blanc sur le côté droit de la tête sur le zoom

J'ai eu un problème similaire sur l'iPad, mais a été en mesure de le réparer avec cette requête de média:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
/*and (orientation : landscape)*/ {
html,
body {
width:1000px; 
}
}

J'ai essayé diverses requêtes de média ciblant le html et les éléments du corps avec pas de chance. J'ai regardé à travers l'ensemble du fichier CSS pour des problèmes avec les images d'arrière-plan, les marges, le rembourrage, les débordements, etc., mais je suis vraiment perplexe. Ne jamais quelqu'un a des suggestions?

Merci beaucoup!

OriginalL'auteur Greg | 2013-09-22

  1. 5

    Le problème est dans votre <h3 class="menu-toggle">Menu</h3> (pourquoi h3, d'ailleurs?), qui semble être plus large que la fenêtre d'affichage parce que d'avoir width: 100% + rembourrage.

    Essayer de définir une box-sizing: border-box; à cet élément.

    Cela a fonctionné! Donc la leçon à tirer de cela est que tout élément ayant une largeur de 100% ne doit pas avoir tout à gauche ou à droite de rembourrage. Si elle le fait, iOS va ajouter et afficher une zone vide à droite égale à un rembourrage supplémentaire.
    Ce n'est pas à propos de l'iOS, le problème est reproductible sur d'autres navigateurs aussi bien. Chaque fois que vous utilisez width: 100% avec un rembourrage, vous devez définir box-sizing: border-box; à éviter tout chevauchement.
    Je viens de résoudre le même problème ici avec cette... Le problème était que l'un de mes titres a été de plus de 100%... Merci 🙂

    OriginalL'auteur Tigran Petrossian

  2. -6

    Essayer cette

    iPhone 5 - Paysage

    @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { }

    iPhone 5 - Portrait

    @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) { }

    iPhone 4

    @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { }
    Est-ce que même travail?
    Ne sais pas, parce que j'ai bien dit "Essayer".
    Retiré &nbsp; 🙂

    OriginalL'auteur mdesdev