操作トリガーがtouchかclickかで、UIを出し分ける
なお、最初の操作トリガーになるボタンは、あらかじめ大きめの当たり判定を持たせておく必要がある
スタイル調整
タッチ操作用にメニュー項目などを大きくする
https://scrapbox.io/files/659199cdeb205800231522a4.mp4
フィッツの法則を考慮して大きさを調整する
大きなボタンの方が、タッチ操作はしやすい
指も腕もプルプル震えている
ボタンが小さいと、タッチする箇所が指自身で隠れてしまう
ボタンが大きすぎると、マウス操作しづらい
ポインタの移動距離が無意味に長くなる
isTouch() === trueの時だけ、<html>にdata-display-style="touchclick"というattributeを持たせておく
https://scrapbox.io/files/65919be19372b700238a850e.png
sassのmixinを作って
code:scss
@mixin when-display-style-is($name) {
htmldata-display-style*='#{$name}' & {
@content;
}
}
タッチ操作の場合は見た目を大きくする
code:scss
.dropdown-item {
height: 30px;
@include when-display-style-is(touchclick) {
height: 50px;
}
}
メニューの内容を変更
clickとtouchの判別で作ったisTouch()を使って切り替える
例えば
エディタを指でタッチした時だけ、popup menuを表示する
マウスクリックした場合は表示しない
どちらもonClickイベントハンドラの中でisTouch()で判別し、そこから分岐している
https://scrapbox.io/files/63dc8ded8e2c92002194c9bf.MOV