用于检测滞后位置的媒体查询:固定行为

发布于 2024-12-10 18:38:09 字数 208 浏览 0 评论 0原文

我有一个网站,其中一些元素具有位置:固定。它在桌面浏览器上看起来不错,但在我的手机(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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

我很OK 2024-12-17 18:38:09

CSS 媒体查询不检测行为。它们检测:

  • 浏览器窗口的宽度和高度
  • 设备宽度和高度
  • 方向 – 横向/纵向模式
  • 分辨率

更多信息:http://www.w3.org/TR/css3-mediaqueries/#media1

CSS media queries do not detect behaviour. They detect:

  • width and height of the browser window
  • device width and height
  • orientation – landscape/portrait mode
  • resolution

More info: http://www.w3.org/TR/css3-mediaqueries/#media1

糖果控 2024-12-17 18:38:09

添加这个元元素和这个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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文