5 ms·

So what's your solution? How do we differentiate between a tablet user and someone who decided to shrink their windows?

by NeutronStar 6y ago

ironmagma 6y ago
Copying from elsewhere in this thread: `@media (pointer: coarse)`
- capableweb 6y ago
  Don't think that's quite right either. Pointer coarse would just refer to the device used for pointing. Using a tablet with a mouse would be "pointer: fine" but it's still a tablet. As always, the issue isn't black and white. There is no solution that always works, because it depends on what you're targeting. If you want to scale elements to be easier clickable for people who might devices where it's harder to click/tap accurately, then "pointer: coarse" makes sense. If you're thinking about scaling elements on the website, some other solution fits better. Which one? Again depends on what you're aiming for.
  - samatman 6y ago
    > Using a tablet with a mouse would be "pointer: fine" I would want to check this empirically before accepting it as gospel. At least on the iPad, a mouse pointer is kinda halfway between a finger and a classic mouse pointer, and having to guess, my guess is that Safari doesn't change the designation just because there's a mouse plugged in.
    - jamiek88 6y ago
      Safari simulates a finger press when mouse is clicked. I’m 99% sure. Will check.
  - lolinder 6y ago
    The spec distinguishes between "pointer: coarse" and "any-pointer: coarse", where the former only asks about the primary pointer. I'd assume that tablets would leave "pointer" unchanged even if a mouse is plugged in, though I haven't verified that. And aside from that, shouldn't a tablet where a mouse is being used as the primary input show buttons sized appropriately for a mouse, rather than larger ones? The whole idea of making buttons bigger on mobile is to accommodate thumbs, so it seems like this media query is exactly what we should be using.

So what's your solution? How do we differentiate between a tablet user and someone who decided to shrink their windows?

ironmagma 6y ago

Copying from elsewhere in this thread: `@media (pointer: coarse)`

capableweb 6y ago
Don't think that's quite right either. Pointer coarse would just refer to the device used for pointing. Using a tablet with a mouse would be "pointer: fine" but it's still a tablet. As always, the issue isn't black and white. There is no solution that always works, because it depends on what you're targeting. If you want to scale elements to be easier clickable for people who might devices where it's harder to click/tap accurately, then "pointer: coarse" makes sense. If you're thinking about scaling elements on the website, some other solution fits better. Which one? Again depends on what you're aiming for.
- samatman 6y ago
  > Using a tablet with a mouse would be "pointer: fine" I would want to check this empirically before accepting it as gospel. At least on the iPad, a mouse pointer is kinda halfway between a finger and a classic mouse pointer, and having to guess, my guess is that Safari doesn't change the designation just because there's a mouse plugged in.
  - jamiek88 6y ago
    Safari simulates a finger press when mouse is clicked. I’m 99% sure. Will check.
- lolinder 6y ago
  The spec distinguishes between "pointer: coarse" and "any-pointer: coarse", where the former only asks about the primary pointer. I'd assume that tablets would leave "pointer" unchanged even if a mouse is plugged in, though I haven't verified that. And aside from that, shouldn't a tablet where a mouse is being used as the primary input show buttons sized appropriately for a mouse, rather than larger ones? The whole idea of making buttons bigger on mobile is to accommodate thumbs, so it seems like this media query is exactly what we should be using.