2013-10-05 19 views
5

Problem:
Podczas ładowania URL powyżej na iOS7 iPad w trybie poziomym, znajduje się pionowy pasek przewijania. Istnieje brak treści treści, a to normalizuje margines ciała/padu/dopełnienie. Dla jasności jest to minimalny przypadek testowy, jaki mógłbym podać, stąd brak treści i pusta strona.Extra wysokość ciała na iPada krajobraz bez zawartości ciała (iOS7)

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

Rzeczy próbowałem:
Ustawianie rzutnię do:

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

i

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

Kilka innych informacji:
Nie mam dostępu do iPada z systemem iOS6, ale testowałem wersję demonstracyjną na urządzeniu iPad3 z systemem iOS6 za pomocą przeglądarki i nie było paska przewijania, więc wygląda na to, że ten błąd jest ograniczony do iOS7.

Portret na iPhonie również nie ma paska przewijania, ale krajobraz iPhone'a ma.

+0

Tak @JoshC, to celowe. IPad ma pasek przewijania bez zawartości treści. To całkowicie zdezelowany test. – Dean

+1

Pasek tytułu i paska adresu w przeglądarce Safari na iOS 7 zmniejsza się w trakcie przewijania strony na iPhonie (aby zaoszczędzić miejsce). To się nie dzieje na iPadzie. Myślę, że to może być powiązane. Wygląda na to, że błąd prowadzi do błędnego obliczenia dostępnego rozmiaru okna, stąd denerwujący lekki zwój dokumentów, który nie przekracza wysokości okna. – Ade

+0

Czy próbowałeś ustawić html, body tags z "box-sizing: border-box"? Może warto przeprowadzić szybki test. Nie uaktualniłem systemu do iOS7, więc nie mogę go przetestować. – ZombieCode

Odpowiedz

3

Dobrze więc po kilka testów (The result of which are here) Mam osiedlili się na dwóch rzeczach:

  1. Ten błąd (Przynajmniej myślę, że jest to błąd ...) jest związana z WebKit przewijanie i robi w rzeczywistości nie wpływa to na wysokość Twojej witryny/aplikacji

  2. Jeśli tworzysz pojedynczą aplikację, którą tworzysz, musisz dodać do niej JS, aby zapobiec wyzwalaniu zdarzeń przewijania. Zapobiegnie to również efektowi sprężystego przewijania i problemowi pionowego paska przewijania.

    document.ontouchmove = function(event){ 
        event.preventDefault(); 
    } 
    

JsFiddle przedstawia eksperymenty ja. Mam nadzieję, że pomaga!

+0

Mam pusty dokument HTML i zdumiewająco ipad uważa, że ​​jest wystarczająco dużo treści, aby zagwarantować pionowy pasek przewijania. to powstrzymało to. dzięki –

+0

Serdecznie witamy! –