CSS 媒体查询来检测设备类型而不考虑大小

标签 css mobile responsive-design media-queries usability

我一直在研究媒体查询,但到目前为止,我在 google 和 Stack Overflow 上可以找到的所有示例都是使用特定大小(max-widthmax-device- width 等)问题在于它没有给我所需的灵 active 。我希望能够为台式机和平板电脑提供**专门定制的**体验。

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

与使用相同尺寸显示器的台式机用户相比,我如何才能为 iPad 用户提供量身定制的体验?我希望桌面体验不会被迫使用触摸体验所需的超大按钮。

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

最佳答案

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

要用 javascript 做到这一点,请看这个问题: What's the best way to detect a 'touch screen' device using JavaScript?

关于CSS 媒体查询来检测设备类型而不考虑大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22085063/

相关文章:

JavaScript 不显示红叉

mysql - 当记录跨越多个表时,在移动条目表单上创建格式正确的记录

html - 如何使用 Bootstrap 在移动设备上清理导航栏菜单

html - 不居中的响应式网页设计

html - Bootstrap 导航栏中的表单在折叠模式下有额外的填充

html - 使用 CSS 定位元素

html - 为什么有些浏览器会自动将页面上的文本区域设为 "resize"?

html - 在移动设备上触摸屏幕时标记所有网页

css - 手机上的网站比显示器大

javascript - React 颜色动画同步