Touch Support in JavaScript

What problems can a frontend programmer have if a tester launches his application on an iPad with a new trackpad keyboard, a Windows tablet, an undefined state of “tablet mode”, or a laptop with a multi-touch TV connected to it?

, . — , , , , . . : iPad Safari, Android - Windows10 Google Chrome — .

, , , Web Touch.

Touch .

:

• CSS :hover
• viewport -

, .

Touch-

, . -, , .

, .
: Multi-touch. , Touch-. Touch- . , , , , .

Touch- touchstart mousemove: mousemove touchstart, , .

    touchstartHandler() {
       this._isTouch = null;
    }
    mousemoveHandler() {
       if (this._isTouch === null) {
          this.updateState(true);
       } else if (this._isTouch) {
          this.updateState(false);
       }
    }
    updateState(state) {
       this._isTouch = state;
       this._triggerEvent();
    }

, body is-touch is-hover.

:hover

:hover Touch . :hover :

   body.is-hover .my-button:hover {
   }

@media (hover: hover), hover Chrome Firefox .

:hover , .

.

, :hover- ( , ..).

:hover iOS , , . Android Windows .

Touch- :hover , swipe .

Swipe- mousemove touch- :

• 50px;
• 25px;
• 600;
• 25px , .. .

, Google Chrome .

:
1
2
:
1
2

- , . , , . . 300px , POS-.

:

, . .

, 100% :

-, API , . . .

-, . : 0.3 0.55 .

iPad Smart Keyboard, , .. .

, VisualViewport. 12 iOS, viewport .

API 2 :

• resize, , ;
• .

iOS12 , .. VisualViewport, .

, , . iOS . , .

-. iPad Google , , , .

, , .

, , . , , SPA- , iOS.

activate . iOS-. enableScreenKeyboard: true . .

Touch —

, Touch-. 20% , 80% : .

, Touch , .

, , , , .

, .