Переполнение прокрутки Div при указании -ms-viewport?
Работая над страницей, которая просматривается в Windows Phone 8, я заметил странное поведение. Когда -ms-viewport указан с шириной или высотой, кажется, что пользователи больше не могут использовать режимы сенсорной прокрутки для элемента переполнения: auto или -ms-touch-move: pan-y.
Кто-нибудь сталкивался с таким поведением или знает о каких-либо обходных путях?
edit: посетите этот URL на устройстве WP8 для ознакомления: http://fiddle.jshell.net/Vk7SR/3/show/light
2 ответа
Настройка @-ms-viewport { width: auto } может быть неприемлемым для ряда приложений, которые стремятся представить реактивный интерфейс на устройствах Windows Phone. Рабочая альтернатива, которая позволяет вам установить желаемую ширину области просмотра, - установить следующее правило CSS:
body, html {
-ms-overflow-style: none !important;
}
Я скопировал оригинальную копию и исправил ее с помощью этого правила на https://gist.github.com/tjanczuk/7419485. Вы также можете перейти непосредственно к HTML-странице с исправлением с устройства Windows Phone по адресу http://htmlpreview.github.io/?https://gist.github.com/tjanczuk/7419485/raw/9a13fc9ad43f2103d8b9e23e25c7b0672a13385f/gistfile1.html
Установка ширины в авто (как показано ниже) вместо ширины устройства, кажется, решает проблему прокрутки. Я взял исходный код с вашей страницы ( http://fiddle.jshell.net/Vk7SR/3/show/light/), упаковал его как приложение WP8 и попробовал на Lumia 920.
@-ms-viewport {
width: auto;
}