Assistance tactile en JavaScript

Quels problèmes un programmeur frontal peut-il avoir si un testeur lance son application sur un iPad avec un nouveau clavier trackpad, une tablette Windows, un état indéfini du «mode tablette» ou un ordinateur portable avec un téléviseur multi-touch connecté?

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

, , , , .

, .