जावास्क्रिप्ट में टच सपोर्ट

फ्रंटएड प्रोग्रामर को क्या समस्या हो सकती है यदि एक परीक्षक ने iPad पर एक नया ट्रैकपैड कीबोर्ड, एक विंडोज टैबलेट, "टैबलेट मोड" की अपरिभाषित स्थिति, या एक मल्टी-टच टीवी वाला लैपटॉप लॉन्च किया है?

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

, , , , .

, .