Extra-Körpergröße auf dem iPad Landschaft ohne Körperinhalt (iOS7)

Das Problem:
Wenn die URL im Landscape-Modus oben auf iOS7 iPad geladen, gibt es eine vertikale Bildlaufleiste. Es gibt keinen Körperinhalt, und es normalisiert den body/html margin/padding. Nur um klar zu sein, ist dies der minimale Testfall, den ich anbieten konnte, daher fehlender Inhalt und leere Seite.Extra-Körpergröße auf dem iPad Landschaft ohne Körperinhalt (iOS7)

Demo:
http://fiddle.jshell.net/AKRCa/show/

Dinge, die ich versucht habe:
Einstellen des Ansichtsfenster:

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

und

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

Ein paar andere Informationen: Ich habe keinen Zugriff auf ein iPad mit iOS6, aber ich habe die Demo auf einem iPad3 mit iOS6 mit Browserstack getestet und es gab keine Bildlaufleiste, so scheint es, dass dieser Fehler auf iOS7 beschränkt ist.

iPhone-Porträt hat auch keine Bildlaufleiste, aber iPhone Landschaft tut.

Quelle

2013-10-05 Dean

Ja @JoshC, es ist beabsichtigt. Das iPad hat eine Bildlaufleiste ohne Körperinhalt. Es ist ein komplett abgespeckter Testfall. – Dean

Der Titel- und Adressleistenbereich in Safari auf iOS 7 verkleinert sich, wenn Sie auf dem iPhone eine Seite nach unten scrollen (um Speicherplatz zu sparen). Dies passiert nicht auf dem iPad. Ich denke, das kann verwandt sein. Es scheint sich um einen Fehler zu handeln, der zu einer Fehlberechnung der verfügbaren Fenstergröße führt, daher das lästige leichte Scrollen von Dokumenten, die die Fensterhöhe nicht überschreiten. – Ade

Haben Sie versucht, die HTML-, Body-Tags mit einer 'Box-Sizing: Border-Box' zu setzen? Es könnte einen kurzen Test wert sein. Ich habe noch kein Upgrade auf iOS7 durchgeführt, daher kann ich es nicht testen. – ZombieCode

Okay, so nach einigen Tests (The result of which are here) ich auf zwei Dinge entschieden haben:

Dieser Fehler (zumindest ich denke, es ist ein Bug ...) ist verwandt mit Webkit-Scrolling und tut nicht wirklich die Höhe Ihrer Website/App beeinflussen
Wenn es eine einzelne Seite App ist, die Sie erstellen, müssen Sie diese JS hinzufügen, um zu verhindern, dass Scroll-Ereignisse ausgelöst werden. Dies verhindert auch den federnden Überrollen-Effekt und das Problem mit der vertikalen Bildlaufleiste.
```
document.ontouchmove = function(event){ 
    event.preventDefault(); 
} 
```

JsFiddle zeigt die Versuche ich es tat. Ich hoffe, das hilft!

Quelle

2013-11-22 15:57:20

Ich habe ein leeres HTML-Dokument und erstaunlicherweise Ipad denkt, dass es genug Inhalt gibt, um vertikale Bildlaufleiste zu rechtfertigen. das hat es verhindert. danke –

Sie sind herzlich willkommen! –

Extra-Körpergröße auf dem iPad Landschaft ohne Körperinhalt (iOS7)

Antwort

Verwandte Themen