Существует хорошо известная проблема с шириной медиазапроса, которая не совпадает с шириной области просмотра в некоторых браузерах (браузеры WebKit изменяют размер своей области просмотра CSS, когда видны полосы прокрутки). Я хотел решить проблему, переместив вертикальную полосу прокрутки с body или html на первую оболочку div (как описано в stackoverflow: https://stackoverflow.com/a/10091608/1647291).
Исправление
Вот исправление с помощью CSS:
body, html { overflow: hidden; height: 100%; }
div.wrapper { overflow: auto; height: 100%; }
Он перемещает вертикальную полосу прокрутки от body или html к первому div внутри body. Благодаря этому вам не нужно беспокоиться о ширине области просмотра в медиа-запросах.
Эта проблема
Но, к сожалению, у этого замечательного метода есть один неприятный побочный эффект — на iPad (и, возможно, на некоторых других платформах) страница не может плавно прокручиваться. После того, как вы перестанете касаться экрана, он сразу же перестанет прокручиваться, нет плавного и медленного замедления.
Это простое решение с CSS намного проще и лучше, чем все эти методы с тестированием области просмотра с помощью javascript. Некоторые из них описаны здесь, но они ненадежны или сильно тормозят работу сайта:
- Запросы мультимедиа CSS и ширина окна JavaScript не совпадают
- http://github.com/tysonmatanich/viewportSize
- http://github.com/ryanve/verge
Есть ли способ использовать это исправление CSS и заставить iPad правильно прокручиваться?
