用于检测滞后位置的媒体查询:固定行为
我有一个网站,其中一些元素具有位置:固定
。它在桌面浏览器上看起来不错,但在我的手机(Xperia Arc,Android 2.3)上,这些元素会随着页面滚动,直到您从屏幕上松开手指,此时它们会跳到正确的位置。这看起来很难看。
现在,我可以轻松更改 CSS,以便网站在具有此行为的设备上看起来也很好,但是可以使用 CSS 媒体查询检测到这种行为(或相关属性)吗?
I have a website with some elements that have position: fixed
. It looks fine on a desktop browser, but on my phone (Xperia Arc, Android 2.3) those elements scroll with the page until you release your finger from the screen, at which point they'll jump to their proper location. This looks ugly.
Now, I could easily change the CSS so the site also looks fine on devices with this behaviour, but can such behaviour (or a correlated property) be detected with a CSS media query?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
CSS 媒体查询不检测行为。它们检测:
更多信息:http://www.w3.org/TR/css3-mediaqueries/#media1
CSS media queries do not detect behaviour. They detect:
More info: http://www.w3.org/TR/css3-mediaqueries/#media1
添加这个元元素和这个CSS。
元名称=“视口”内容=“宽度=设备宽度,初始比例= 1.0,最大比例= 1.0,最小比例= 1.0,用户可扩展=否”/
正文{
-webkit-用户选择:无;
-webkit-touch-callout:无;
-webkit-tap-highlight-color: rgba(0,0,0,0);
尝试一下
。但我无法测试它,所以我不知道
add this meta element and this css.
meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /
body {
-webkit-user-select:none;
-webkit-touch-callout:none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
try that. but i can't test it so i duno