【HTML・CSS】アンカーリンクが２回クリックしないと遷移しないときの対処法

y.saito

今回対応した案件の備忘録です。

[ 現象 ]

サイトのメニューにトップページ内のアンカーリンクを設置したのですが、iPhoneでクリックすると、1回目はリロードになり、2回目にクリックしてやっとアンカーリンクの該当箇所に遷移しました。

[ 対処法 ]

< body >  に ontouchstart="" 追加を行う。

<body ontouchstart="" >


cssに下記を追記する。

/* アンカーリンクが2回タップが必要な対処法 */
@media (min-width: 1px) and (max-width: 1050px) {
  a:hover {
    opacity: 1;
  }
}


こちらの記事を参考にさせていただきました。


こちらで見事対応できました。

いいなと思ったら応援しよう！