MobilePhone programming. Touchscreen device with finger VS browser with mousePiinter.

On programmers point of view there two very difference device - with Mouse and with TouchScreen. Why difference? Because usually one type of device support one operation, but other type of device support another operations. Usually we can very clear understand difference on CSS :hover subclass, only mouse-supported device can processing this subclass and many other.

Therefore usually we need to write two different software - with mouse-supported device and finger-supported device. Look for example to this my page https://justrelax10.pages.dev/

If you will se to this page, you will see two different CSS styles:

@media (any-pointer: fine) {
  .square:hover {
    transition-duration: 0s;
    transform: rotateX(180deg) scale(1.2);
  }
}

@media (any-pointer: coarse {
  .square:active {
    transition-duration: 0s;
    transform: rotateX(180deg) scale(1.2);
  }
}

And main future of this page CSS :hover or JS mouseover events will working only on mouse-based device. Touchscreen support another events https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

I publish this MDN page to https://touchscreen.pages.dev/Index and you can see how it working

Of course, in reality we not handle raw processing events in JS, we used special library like contact.js https://biodiv.github.io/contactjs/documentation/general/

But various mobile device has different restriction, for example on my phone contact.js:

• Tap test - working fine
• 2 finger test - working fine
• Pinch test - working fine
• Press test - working fine
• Swipe test - not working by default
• Move test - not working by default
• Rotate test - not working with one finger, and working fine with 2 fingers

For fix that we need to prevent native events - Prevent native events, in simplest case need add to CSS

touch-action: none;

In this case moving working even on my phone.

And this is cool and useful articles obout this case Handling complex mouse and touch events with RxJS

• (2023) CloudflareWorker and Supabase
• (2022) NativeScript, AndroidBooks
• (2022) JS, Css
• (2022) Typescript, Webpack
• (2022) Angular, RxJs, Firebase, MongoDb
• (2022) Node, NestJs, Electron, Pwa, Telegram
• (2022) React, Redux, GraphQL, NextJs
• (2022) Angular/Typescript, JS books

Comments ( )