问题描述
我一直在研究媒体查询,但到目前为止,我在 google 和 Stack Overflow 上找到的所有示例都使用特定大小(max-width
、max-device-width
等)的问题在于它没有给我所需的灵活性.我希望能够为台式机和平板电脑提供**专门定制的**体验.
I have been looking into media queries, but so far all the examples I can find on google and Stack Overflow have been to use specific sizes (max-width
, max-device-width
, etc.) The problem with this is that it doesn't give me the flexibility I need. I want to be able to deliver a ** specifically tailored** experience to desktops and tablets.
我想这样做的原因是与平板电脑的交互与与小型计算机显示器的交互不同.横向的 iPad 是 1024x768,这也是常见的电脑显示器尺寸.然而不同的是,在计算机上,用鼠标指向小控件很容易,但在 iPad 上点击相同大小的控件却很难,尤其是对于手指粗大或笨拙的人.
The reason I want to do this is that interacting with a tablet is different than interacting with a small computer monitor. An iPad in landscape orientation is 1024x768, which also happens to be a common computer monitor size. The difference however is that on a computer, pointing to small controls with a mouse is easy, but it is very difficult to tap the same size controls on an iPad, especially for someone with large or clumsy fingers.
我如何为 iPad 用户和使用相同尺寸显示器的桌面用户提供量身定制的体验?我希望桌面体验不会被迫使用触摸体验所需的超大按钮.
How can I deliver a tailored experience to an iPad user vs a desktop user with a monitor of the same size? I'd like the desktop experience to not be forced to use jumbo sized buttons that a touch experience requires.
这是否可以通过媒体查询或其他方式实现?我看到媒体查询有一个手持"选项,但我读到大多数小型设备浏览器都忽略了这一点.
Is this possible with media queries, or something else? I see that there's a "handheld" option for media queries, but I've read that most small device browsers ignore this.
推荐答案
媒体查询无法实现.有一种手持"媒体类型,但大多数(如果不是所有)现代手持设备都将自己标识为屏幕".
It's not possible with media queries. There is a "handheld" media type, but most, if not all modern handheld devices identify themselves as "screen".
要使用 javascript 来完成,请参阅此问题:检测 ' 的最佳方法是什么?使用 JavaScript 的触摸屏设备?
To do it with javascript, see this question:What's the best way to detect a 'touch screen' device using JavaScript?
这篇关于用于检测设备类型的 CSS 媒体查询,无论大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!