Huei (myself) has one touchable desktop browser (chrome) device.

Huei comment in the internal discussion channel

Thinking out loud here regarding the touchable device

In our current mindset when dealing with desktop or mobile browser, we use touchable event to do popup (desktop) and touchPopup (mobile), and we are not yet include tablet browser.

In today's world, it's hardly to tell the difference between desktop / tablet, any modern desktop can turn to tablet mode when unplug the keyboard from screen. Tablet and also turn to desktop when plug with keyboard + mouse.

When i look at our code, there are two events mouse and touch which use to detect the difference, there are mostly independence, that means in desktop touch event doesn't work, in mobile mouse shouldn't work because there isn't mouse for table/mobile.

Given that there is possible the browser (at least mine is) supports both mouse and touch, when I use mouse I would like to see the popup, when I use hand to touch I would like to see the popup in mobile mode, if that makes sense.

Therefore, I think it's possible for us not to detect isTouch, we can find the difference when receiving which event is being called, that said mouse belongs to desktop, touch belongs to mobile and tablet.

I think this way we solve most of the device and we don't have to worry about which mode user in, instead taking care which event it has.

I hope the explanation here is easy to read, let me know what's your thought and let's have the discussion when needed.

It's also recommend by Modernizr

It's recommended to bind both mouse and touch/pointer events simultaneously, https://modernizr.com/docs/#touch

I updated the description to make it clearer, add an image, and add stats about how many of these devices we see using Wikipedia Preview.

Currently, the device classification in our instrumentation is based on the presence of touch support (if the device does not have touch support, we add the standard wprov=wppw2 to its preview and pageview URLs; otherwise, we add a t to the end).

When we fix this, it will be very helpful if we can update the classification to something closer to the normal concept of mobile (smartphone, tablet) or computer (desktop, laptop). We can signal this by changing the last letter of the wprov parameter to m for mobiles or c for computers. We should update the instrumentation version at the same time (that is, changing wppw2 to wppw3).

(Note for my future self: once that is done, I intend to update the ETL job to populate the device_type column with "mobile" or "computer" when we get the new letters. Those values will coexist with the older "touch" and "non-touch" values, and I can combine them as necessary in the reporting and analysis step.)

Combinations

Legend

• viewport: The size of the device viewport. Values are small or big with small being < 768px
• touch: the device has touch capabilities
• pointer: the device has pointer capabilities (mouse or trackpad)
• popup: mode of the resulting popup. Values are "mobile" or "desktop". Mobile is a bottom drawer and desktop is smaller and floating next to the target
• events: events that trigger the popup to open

Conclusions

1. Only the size of the viewport determines the size of the popup. small = mobile, big = desktop
2. If the device has touch capabilities, touch opens the popup. If it has a pointing device, pointerenter open the popup. If it has both, they should both work.

@hueitan @SBisson I can only test via BrowserStack with the Demo pages mentioned. As for the touchscreen treating it as mobile, it is fine as seen in the gifs. I am having an issues with iPad 10th as seen in the gif below. Can you please review before moving to Done?

UPDATE: Verified that dark mode is fine since the functionality works in light mode

Test Result - Demo

Status: ✅ PASS
Environment: Demo
OS: Windows 11 via BrowserStack
Browser: Chrome 127, Firefox 128
Device: MBA
Emulated Device: BrowserStack

Test Artifact(s):
However, laptops with touchscreens support touch events, so Wikipedia Preview treats them as mobile devices. This has three problems:

Previews don't show when the user hovers a cursor on the link
Clicking leads you to the mobile site, not the main site.
Previews are too wide. Here's an example based on a 1200x800 screen:

https://wikimedia.github.io/wikipedia-preview/main/articles/spanish.html
https://wikimedia.github.io/wikipedia-preview/main/articles/english.html

Chrome- Light	Chrome- Dark	FireFox- Light	Firefox- Dark

iPhone 15 Pro Max- Light	iPhone 15 Pro Max- Dark	iPad 10th-Light	iPad 10th- Dark	Galaxy S23- Portrait	Galaxy S23- Landscape