CSS 媒体查询可检测设备类型(无论大小)

2023-12-14

我一直在研究媒体查询,但到目前为止,我在谷歌和 Stack Overflow 上找到的所有示例都是使用特定尺寸(max-width, max-device-width等)这样做的问题是它没有给我所需的灵活性。我希望能够为台式机和平板电脑提供**专门定制的**体验。

我想这样做的原因是与平板电脑交互不同于与小型计算机显示器交互。 iPad 横向尺寸为 1024x768,这也是常见的电脑显示器尺寸。然而,不同之处在于,在计算机上,用鼠标指向小控件很容易,但在 iPad 上点击相同大小的控件非常困难,特别是对于手指较大或笨拙的人来说。

与具有相同尺寸显示器的桌面用户相比,如何为 iPad 用户提供量身定制的体验?我希望桌面体验不要被迫使用触摸体验所需的巨型按钮。

这可以通过媒体查询或其他方式实现吗?我看到媒体查询有一个“手持”选项,但我读到大多数小型设备浏览器都会忽略这一点。


媒体查询不可能做到这一点。有一种“手持”媒体类型,但大多数(如果不是全部)现代手持设备将自己标识为“屏幕”。

要使用 javascript 执行此操作,请参阅以下问题:使用 JavaScript 检测“触摸屏”设备的最佳方法是什么?

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS 媒体查询可检测设备类型(无论大小) 的相关文章