Mobile Safari weiße Polsterung / Rand rechts

8

Ich habe andere Themen überprüft, aber ich kann das nicht herausfinden. Testen Sie diese Seite hier: Ссылка

Wenn ich in Mobile Safari in der Hochformatansicht bin, kann ich nach rechts blättern, um ein weißes Padding zu erhalten. Ich will das nicht.

In der Landschaftsansicht ist dieses Scrollen nicht vorhanden und es wird so gerendert, wie ich es möchte.

Ich habe keine Ahnung, was diesen mysteriösen Schub verursacht. Ich habe versucht, Überlauf-x zu beseitigen, aber das macht den Trick nicht. Wenn ich overflow-x für jeden Container lösche, kann der gleiche Effekt für jeden Container auf der Seite auftreten. Irgendwelche Ideen?

    
ShawnB 21.12.2011, 14:17
quelle

4 Antworten

10

Das Hinzufügen eines Rahmens zu einigen divs kann dazu führen, dass sich das Layout ändert. Füge dies am Ende deines CSS hinzu, um das Schurkenelement zu finden:

%Vor%

Ich habe auch ein Bookmarklet erstellt, das dies über Javascript tut, so dass es leicht auf jeder Site verwendet werden kann. Ссылка

    
Kyle Werner 09.08.2013 19:29
quelle
2

Dies wird höchstwahrscheinlich dadurch verursacht, dass eines Ihrer strukturellen Elemente Ihre Körperbreite überschreitet. Suchen Sie nach Code, der etwas wie width: 100%; padding 20px; oder etwas, das es schießen würde, macht.

Ich schlage vor, alle Hauptdivis einen roten Rand zu setzen und zu sehen, welcher der Täter ist und bis zum Rand reicht.

    
Indranil 21.12.2011 14:34
quelle
0

Dieses Problem ist in der Tat auf "Rogue" -Elemente zurückzuführen, die sich aus irgendeinem Grund außerhalb der Dokumentbreite erstrecken.

Eine Methode besteht darin, das obige CSS zu verwenden, habe es nicht versucht, aber ich bin mir nicht sicher, wie einfach es wäre, die Elemente mithilfe der Rahmen zu erkennen.

Ein anderer Ansatz wäre, diesen JS-Code in der Konsole auszuführen, um sie zu finden:

Array.prototype.filter.call(document.querySelectorAll('*'), function (node) { return node.clientWidth + node.offsetLeft > document.documentElement.clientWidth });

Dies wird ein Array aller Elemente zurückgeben, deren Breite + Offset (Abstand von links) größer ist als die clientWidth.

Sie müssten dann die Elemente überprüfen und herausfinden, warum sie sich so verhalten - in meinem Fall hatte die Fußzeile width:100% und padding:10px , was dazu führte, dass ihre Breite 20px größer als die Dokumentbreite war.

Interessanterweise wurde dies nur auf iPhones, nicht auf Androids gesehen.

    
Gilad Barner 21.07.2016 08:43
quelle
-3

Ich würde vorschlagen, Web Developer für Firefox herunterzuladen und Outline & gt; Gliederungselemente auf Blockebene.

    
Marc Rabinowitz 03.02.2012 20:32
quelle

Tags und Links