スマホのhover

最近はモバイルファーストでスマホ対応のサイトがほとんどです。

スマホ用のサイトを作成する方法とレスポンシブサイトとして
スマートフォンもPCも同じページのレイアウトを変更して
見せ方を変える方法とで対応してるサイトがあります。

今回はBootstrapのレスポンシブでカルーセルを利用して
スライダー表示をしていたのですが、インジゲーターが
iPhoneでクリック出来ないということで、いろいろと
検索して設定を変えてみましたがうまくいかず、
結局スライダーをスマホ対応の物に変更しました。
ただ以下の記述にて対応できるものもあるかと
思ったので覚書として残します。

「ontouchstart属性を追加する」
これだけで大丈夫でした。

特にjQueryも不要でスマホでクリックができるようになります。
bodyタグに入れても良いですし、クリックしたいdivに入れても
良いしプロパティは空で大丈夫です。

書き方の例は以下となります。
<div ontouchstart=”” >クリック内容</div>