在 Windows Phone 8 中查看的页面上工作时,我注意到一个奇怪的行为。当 -ms-viewport 指定了宽度或高度时,用户似乎无法再在 overflow:auto 或 -ms-touch-move:pan-y 元素上使用触摸滚动行为。
有人遇到这种行为,或者知道任何解决方法吗?
编辑:在 WP8 设备上访问此 URL 进行复制:http: //fiddle.jshell.net/Vk7SR/3/show/light
在 Windows Phone 8 中查看的页面上工作时,我注意到一个奇怪的行为。当 -ms-viewport 指定了宽度或高度时,用户似乎无法再在 overflow:auto 或 -ms-touch-move:pan-y 元素上使用触摸滚动行为。
有人遇到这种行为,或者知道任何解决方法吗?
编辑:在 WP8 设备上访问此 URL 进行复制:http: //fiddle.jshell.net/Vk7SR/3/show/light
对于许多渴望在 Windows Phone 设备上呈现反应式 UI 的应用程序来说,设置@-ms-viewport { width: auto }
可能是不可接受的。允许您设置所需的任何视口宽度的可行替代方法是设置以下 CSS 规则:
body, html {
-ms-overflow-style: none !important;
}
我复制了原始复制品并在https://gist.github.com/tjanczuk/7419485上使用此规则对其进行了修复。您还可以从 Windows Phone 设备直接导航到带有修复程序的 HTML 页面,网址为http://htmlpreview.github.io/?https://gist.github.com/tjanczuk/7419485/raw/9a13fc9ad43f2103d8b9e23e25c7b0672a13385f/gistfile1.html
将宽度设置为 auto(如下所示)而不是 device-width 似乎可以解决滚动问题。我从您的页面 ( http://fiddle.jshell.net/Vk7SR/3/show/light/ ) 中获取了源代码,将其打包为 WP8 应用程序并在 Lumia 920 上试用。
@-ms-viewport {
width: auto;
}