タッチデバイスでもないのに ontouchstart でタッチデバイスの振りをするノートがある
別ブログ「そんなには褒めないよ。映画評」のトップページのデザインで、マウスオーバーのイベントをタッチデバイスの場合にどうするかを下記のページで記事にしましたが、"ontouchstart" in window をみるだけでは判定できないデバイスがあることがわかりました。
はてなブログ／touch, mouse を振り分け、hover イベントを統一する
01ontouchstart ではタッチデバイスを判定できないデバイスがある
２、３日前に、映画評を書いている別ブログのテーマを変更しました。
トップページを「一覧表示」にし、各記事のタイトルや概要の表示をタッチデバイスかどうかで振り分け、タッチデバイスであれば「i」アイコンを表示してタッチで表示、そうでなければマウスオーバーで表示するようにしたのですが、ThinkPad Edge E430 ではタッチデバイスではないにもかかわらず、「i」アイコンが表示されることがわかりました。
こんな感じです。
その E430 は私のものではありませんので、なぜそうなのかを詳しく調べることは出来ませんが、とにかくそうしたことがあるなら判定方法を変えるしかありません。
02orientation での判定を追加してみる
いろいろググってはみたのですが、ontouchstart を見る以外の方法が見つかりません。
ユーザーエージェントで判定するしかないかなあと諦めかけていたのですが、
のサイトを発見し、
なるほど Screen.orientation というプロパティをみれば、つまり、タッチデバイスでなければスクリーンの向きを変える機能はないわけですので、これで判定できることに気づきました。
で、この記事を参考に、createTouch はいらないだろうということで、
if(('ontouchstart' in document) && ('orientation' in window)) {
で判定し、ThinkPad Edge E430 でもマウスデバイスの振り分けに成功しました。
それにしても、どういうことなんでしょう？