Überlauf-x:versteckt; auf dem mobilen Gerät funktioniert nicht

Ich hoffe, ihr könnt mir helfen, denn ich kann mir anscheinend nicht den Kopf darüber zerbrechen. Ich baue eine einseitige Site, die gut funktioniert, mit Ausnahme einer Sache, nämlich dem Overflow-x:hidden im Tablet-Ansichtsfenster (und wahrscheinlich auch auf dem Smartphone, habe das noch nicht getestet).

Trotz des Körpers mit body {overflow-x:hidden;} was in normalen browsern auf dem pc gut funktioniert, ich kann mich etwa 25 pixel zur seite bewegen, weil das der überlauf meines gedrehten div ist, der aus dem bildschirm herausragt, den ich verstecken wollte.

Gibt es eine Möglichkeit, dies zu beheben? Ich habe unten einen Teil des Kopfes und HTML / CSS bereitgestellt

Das Viewport-Meta-Tag.

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

Das auf die Medienabfragen angewendete CSS und die entsprechenden Elemente, die überlaufen

@media only screen and (max-width: 992px){
    #skills, #experience    {overflow-x:hidden;}
}
@media (max-width: 479px){
    body                    {overflow-x:hidden;}
}

Und das reguläre CSS, das auf die html / body-Tags angewendet wird

body, html  {height: 100%;width: 100%;font-family: 'Source Sans Pro',Helvetica,Arial,sans-serif;color: #757575; overflow-x:hidden;}

Die Ausweise #skills und #experience haben eine Klasse aufgerufen .hoek die wie folgt definiert ist und den Überlauf verursacht.

    .hoek    {margin: 0 -50px; 
              -webkit-transform-origin:left center; 
              -moz-transform-origin:left center; 
              -o-transform-origin:left center; 
              -ms-transform-origin:left center;
              margin-top: -175px;                       
              -webkit-transform:rotate(5deg); 
              -moz-transform:rotate(5deg); 
              -o-transform:rotate(5deg); 
              -ms-transform:rotate(5deg);
              z-index: 20;
    }

Ich muss darauf hinweisen, denke ich, dass die #skills und #experience sind sections und nicht div. Ich bin mir nicht sicher, ob das ein Problem innerhalb des Codes sein könnte, aber ich dachte nicht. Wenn weitere Informationen benötigt werden, lassen Sie es mich bitte wissen, aber ich dachte, ich hätte hier die Grundlagen abgedeckt.

Ich weiß nicht, wo ich mit einer Geige anfangen soll, also liefere ich Ihnen nur den Testlink der Seite: http://www.jellyfishwebdesign.nl/Joost/index.php

Habe die Antwort tatsächlich hier auf Stack overflow gefunden:

Die Browser auf Mobilgeräten ignorieren die overflow-x:hidden innerhalb der body und html markieren wenn <meta name="viewport"> Tag vorhanden ist, also habe ich einen Wrapper im Body-Tag erstellt, der den Rest meines Inhalts mit a abdeckt overflow-x: hidden darin, das Problem zu lösen.

Dokumentation:

Overflow-x:hidden verhindert nicht, dass Inhalte in mobilen Browsern überlaufen.

Das Schlimme ist, dass es jetzt die Verwendung eines jquery-Plugins verhindert, das scrollt….

Einstellung versuchen minimum-scale=1 Anstatt von maximum-scale=1.

minimum-scale steuert, wie weit aus der Benutzer kann dabei zoomen maximum-scale steuert, wie weit in sie können zoomen. Um zu verhindern, dass der Überlauf angezeigt wird, müssen Sie die Möglichkeit des Benutzers einschränken, herauszuzoomen, nicht hineinzuzoomen.

Wie Dorvalla betonte, body und html Tags werden von Smartphone-Browsern ignoriert, obwohl nicht von “Big Screen” -Browsern. Ich habe das Problem gelöst, indem ich das erste untergeordnete Element der Seitenstruktur verwendet habe, sodass kein zusätzlicher Wrapper erforderlich ist.

zB für meinen WordPress-Fall:

    .site {
        overflow-x: hidden;
        /* Unnecessary IMHO, uncomment next line to force hidden behavior */
        /* overflow-x: hidden !important; */
        /* Additional tunning proposed by the community */
        position: relative;
        width: 100%;
    }

Ich hatte das gleiche Problem und versuchte, Körper mit anzuwenden overflow-x: hidden;und viele andere Antworten, aber was in meinem WordPress funktionierte, war die Anwendung einer globalen CSS-Regel wie unten.

body, html {
overflow-x: hidden;
}

Dadurch entfällt die Bewegung von links nach rechts auf Mobiltelefonen. Der HTML-Teil wird benötigt, nicht nur der Text!

Einstellung versuchen minimum-scale=1 Anstatt von maximum-scale=1 oder initial-scale=1.

z.B.

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

wenn du dich beworben hast overflow-x:hidden zum Karosseriebei dem Sie sich vielleicht bewerben möchten html zu.

body,html {
  overflow-x:hidden;
}

Meine Analyse Stand September 2021. Getestet auf Safari und Firefox 37 (iOS 15).

Die akzeptierte Antwort und ihr SO-Link sind ziemlich alt (2013-2014) und scheinen nicht mehr gültig zu sein.
Ich finde auch, dass das Hinzufügen einer “Verpackung” div auf meinem body ist nicht wirklich elegant und könnte zu unerwartetem Verhalten führen.

Die Seite, an der ich arbeite, ist ziemlich einfach, es gibt nur ein Hintergrundbild könnte Überlauf auf der rechten Seite des Bildschirms für kleinere Bildschirme.

• Bewirbt sich minimum-scale=1 zum viewport Meta-Tag hat nicht funktioniert. Dies verhindert das Herauszoomen, aber ich könnte immer noch diese hässliche Schriftrolle auf der rechten Seite haben.
• Bewirbt sich overflow-x: hidden; an <html> hat nur nicht funktioniert.
• Bewirbt sich overflow-x: hidden; an <body> hat nur nicht funktioniert.
• Bewirbt sich overflow-x: hidden; auf beiden <html> & <body> tat Arbeit.