Warum werden meine Bildlaufleisten nicht auf meiner iPad-Website angezeigt?

iOS-Bildlaufleisten-Anzeigeproblem mit CSS-Überlauf

Bei dem Versuch, Bildlaufleisten innerhalb eines div-Elements auf einer iPad-Website mithilfe von CSS zu aktivieren, kam es zum Überlauf Die Eigenschaft ist scheinbar wirkungslos, obwohl sie in Desktop-Browsern ordnungsgemäß funktioniert. Insbesondere wurden die folgenden Eigenschaften erfolglos getestet:

overflow: auto;
overflow: scroll;

Erläuterung des Problems

iOS-Geräte haben sich dafür entschieden, die Implementierung sichtbarer Bildlaufleisten zu vermeiden und den Platz auf dem Bildschirm zu priorisieren Inhaltsanzeige. Daher wird von Benutzern erwartet, dass sie die Zwei-Finger-Bildlauffunktion verwenden, um durch überfüllte Inhalte zu navigieren.

Lösung

WebKit Overflow Scrolling:

Ab iOS 5beta kann die Eigenschaft -webkit-overflow-scrolling: touch genutzt werden, um das gewünschte Verhalten der Bildlaufleiste auszulösen.

JavaScript und jQTouch:

Alternativ ist es möglich, mithilfe von JavaScript, möglicherweise in Verbindung mit jQTouch, benutzerdefinierte Bildlaufleisten für übergelaufene Elemente zu erstellen.

Medienabfragen:

Um ein nahtloses Erlebnis zu gewährleisten Auf iOS-Geräten können @media-Abfragen verwendet werden, um den Überlauf auf iOS-Geräten zu beseitigen, sodass Inhalte ohne Bildlaufleisten angezeigt werden können.

<link rel="stylesheet" href="handheld.css" media="only screen and (max-device width:480px)">

Das obige ist der detaillierte Inhalt vonWarum werden meine Bildlaufleisten nicht auf meiner iPad-Website angezeigt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!