Toque Soporte en JavaScript

¿Qué problemas puede tener un programador frontend si un probador inicia su aplicación en un iPad con un nuevo teclado trackpad, una tableta Windows, con un estado indefinido de "modo tableta" o una computadora portátil con un televisor con soporte multitáctil conectado?

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

, , , , .

, .