Sentuh Dukungan dalam JavaScript

Masalah apa yang bisa dihadapi oleh programmer frontend jika tester meluncurkan aplikasinya di iPad dengan keyboard trackpad baru, tablet Windows, dengan "mode tablet" yang tidak ditentukan, atau laptop dengan TV dengan dukungan Multi-touch yang terhubung dengannya?

, . — , , , , . . : 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 , .

, , , , .

, .