![Bild](https://habrastorage.org/webt/e-/xg/jm/e-xgjmljcodkiadgqkli546jmms.jpeg)
Welche Probleme kann ein Frontend-Programmierer haben, wenn ein Tester seine Anwendung auf einem iPad mit einer neuen Trackpad-Tastatur, einem Windows-Tablet, einem undefinierten Status des „Tablet-Modus“ oder einem Laptop mit einem daran angeschlossenen Multitouch-Fernseher startet?
, . — , , , , . . : iPad Safari, Android - Windows10 Google Chrome — .
, , , Web Touch.
Touch .
:
, .
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 , .
.
![Bild](https://habrastorage.org/webt/jm/k3/uj/jmk3uji6ylvapt-ts9dk29u3uuw.png)
, :hover- ( , ..).
:hover iOS , , . Android Windows .
Touch- :hover , swipe .
![Bild](https://habrastorage.org/webt/hx/a7/yn/hxa7yn12n9ttxxw4grqbltrstyk.png)
Swipe- mousemove touch- :
- 50px;
- 25px;
- 600;
- 25px , .. .
, Google Chrome .
:
1
2
:
1
2
- , . , , . . 300px , POS-.
![Bild](https://habrastorage.org/webt/z4/76/tv/z476tv0dk7kqo_uysmadoydnuss.png)
:
![Bild](https://habrastorage.org/webt/5y/i5/ov/5yi5ov_tmphht4ihoq_ry4vhcvg.png)
, . .
![Bild](https://habrastorage.org/webt/hq/7h/sx/hq7hsxdrsph6sazijfaqhho1r1e.png)
, 100% :
-, API , . . .
-, . : 0.3 0.55 .
iPad Smart Keyboard, , .. .
![Bild](https://habrastorage.org/webt/6k/mp/0y/6kmp0yu-mcbupc2cktzstzuhrqu.png)
, VisualViewport. 12 iOS, viewport .
API 2 :
iOS12 , .. VisualViewport, .
, , . iOS . , .
-. iPad Google , , , .
, , .
, , . , , SPA- , iOS.
activate . iOS-. enableScreenKeyboard: true . .
Touch —
, Touch-. 20% , 80% : .
, Touch , .
, , , , .
, .