タッチデバイスでもないのに ontouchstart でタッチデバイスの振りをするノートがある

タッチデバイスでもないのに ontouchstart でタッチデバイスの振りをするノートがある


別ブログ「そんなには褒めないよ。映画評」のトップページのデザインで、マウスオーバーのイベントをタッチデバイスの場合にどうするかを下記のページで記事にしましたが、"ontouchstart" in window をみるだけでは判定できないデバイスがあることがわかりました。

はてなブログ/touch, mouse を振り分け、hover イベントを統一する



ontouchstart ではタッチデバイスを判定できないデバイスがある

2、3日前に、映画評を書いている別ブログのテーマを変更しました。

www.movieimpressions.com


トップページを「一覧表示」にし、各記事のタイトルや概要の表示をタッチデバイスかどうかで振り分け、タッチデバイスであれば「i」アイコンを表示してタッチで表示、そうでなければマウスオーバーで表示するようにしたのですが、ThinkPad Edge E430 ではタッチデバイスではないにもかかわらず、「i」アイコンが表示されることがわかりました。


こんな感じです。

f:id:ausnichts:20180624204729j:plain


その E430 は私のものではありませんので、なぜそうなのかを詳しく調べることは出来ませんが、とにかくそうしたことがあるなら判定方法を変えるしかありません。


orientation での判定を追加してみる

いろいろググってはみたのですが、ontouchstart を見る以外の方法が見つかりません。


ユーザーエージェントで判定するしかないかなあと諦めかけていたのですが、

gist.github.com

のサイトを発見し、

なるほど Screen.orientation というプロパティをみれば、つまり、タッチデバイスでなければスクリーンの向きを変える機能はないわけですので、これで判定できることに気づきました。

で、この記事を参考に、createTouch はいらないだろうということで、

if(('ontouchstart' in document) && ('orientation' in window)) {

で判定し、ThinkPad Edge E430 でもマウスデバイスの振り分けに成功しました。


それにしても、どういうことなんでしょう?