2013-10-05 1 views
5

Проблема:
При загрузке выше URL на iOS7 IPAD в ландшафтном режиме, есть вертикальная полоса прокрутки. Существует без содержимого тела, и это нормализует тело/html margin/padding. Просто для того, чтобы быть ясным, это минимальный тестовый сценарий, который я мог бы предоставить, следовательно, недостаток контента и пустая страница.Дополнительная высота тела на IPAD пейзаж с без содержания тела (iOS7)

Демо:
http://fiddle.jshell.net/AKRCa/show/

Вещи, которые я пробовал:
Установка окна просмотра для:

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

и

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

Дополнительная информация:
У меня нет доступа к iPad под управлением iOS6, но я протестировал демо на iPad3 под управлением iOS6 с помощью браузера и не было полосы прокрутки, поэтому эта ошибка ограничена iOS7.

iPhone портрет также не имеет полосы прокрутки, но iPhone пейзаж делает.

+0

Да @JoshC, это намеренно. IPad имеет полосу прокрутки без содержания тела. Это полностью урезанный тестовый пример. – Dean

+1

Область заголовков и адресов в Safari на iOS 7 сокращается при прокрутке страницы на iPhone (для экономии места). Это не происходит на iPad. Я думаю, это может быть связано. Кажется, что ошибка приводит к просчету доступного размера окна, следовательно, раздражает небольшой прокрутка документов, которые не превышают высоту окна. – Ade

+0

Вы пытались установить теги html, body с полем «box-size: border-box»? Это может стоить быстрое испытание. Я еще не обновился до iOS7, поэтому я не могу его протестировать. – ZombieCode

ответ

3

Хорошо, так после некоторых тестов (The result of which are here) Я осевшие на две вещи:

  1. Эта ошибка (по крайней мере, я думаю, что это ошибка ...) связано с WebKit-скроллинга и делает на самом деле не влияют на высоту вашего сайта/приложения

  2. Если это одностраничное приложение, которое вы создаете, вам нужно добавить этот JS к нему, чтобы предотвратить запуск каких-либо событий прокрутки. Это также предотвратит эффект пружинного эффекта прокрутки и проблему вертикальной полосы прокрутки.

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

JsFiddle показывает опыты, которые я сделал. Надеюсь, это поможет!

+0

У меня есть пустой html-документ, и поразительно ipad думает, что есть достаточно контента, чтобы гарантировать вертикальную полосу прокрутки. это остановило его. спасибо –

+0

Добро пожаловать! –