【WordPress】iOS8.4.1で起こるa:hoverの仕様変更問題に対処する

Apple Mac

office-620822_1280

iOS8.4.1機器(iPhoneやiPadなど)で、二回タップをしないとリンク先に飛ばないという事態が起こっているようです。

仕様変更 概要

この仕様変更はa:hoveropacity1以外に設定されていたり、position : relativeなどでボタン画像を凹ませたりすると起こるようです。

指で操作するときはシングルクリック(シングルタップ)ばかりなのでオンマウス(hover)という概念はいらないということでしょうか。

opacityは要素の透明度を指定するときに設定するもので、1は不透明(全く透けない)の設定です。つまりopacityが設定されていないのと同じ状態です。なのでこの設定に違和感がある人もいるかもしれません。

/*これは発生*/
.hoge a:hover{
	opacity: 0.8;
}
.hoge a:hover {
	position : relative;
	top : 1px;
	left : 1px;
}
/*これは発生しない*/
.hoge a:hover{
	opacity: 1;
}

対処方法

(お約束)ご利用は自己責任でお願いします

いろいろな対処法が考えられますが、ユーザエージェントを判別してiOS機器とそれ以外を判別して<body>タグにclass名を付加することにします。class名を分けてしまえばiOS機器に当てるcssとiOS機器以外に当てるcssを変えることができるからです。

手順としては以下です。

  1. ユーザエージェントを判別する(functions.php内)
  2. ユーザエージェント別に<body>タグにclass名を付加する(functions.php内)
  3. そのclass名に対するcssを追加する(style.cssなど)

まずはfunctions.php内に処理を追加します

/*iphoneとipadを判別して <body>のclass名に追加する
これでiOS機器でアクセスされたときにclassにiOSclassが付加され、それ以外のときにはelseiOSclassが付加されます。*/
function checkSP(){//スマホのユーザエージェントをチェックして返す	
	$ua=$_SERVER['HTTP_USER_AGENT'];
	if((strpos($ua,'iPhone')!==false)or(strpos($ua,'iPad')!==false)) {return 'iOSclass';}
	else{return 'elseiOSclass';}
}
function addBodyClass($classes){
	$classes[] = checkSP();
	return $classes;
}
add_filter("body_class","addBodyClass");

これでiOS機器でアクセスされたときにbodyのclassiOSclassが付加され、それ以外のときにはelseiOSclassが付加されます。

↓こんなかんじです。

iOSでアクセスしたとき
iOSでアクセスしたとき
iOS以外でアクセスしたとき
iOS以外でアクセスしたとき

style.cssに追加

さてここからはいろいろな対処法があります。つまりiOS以外に透明化(opacity: 0.8)をかけるか

.elseiOSclass a:hover 
{opacity: 0.8;}

iOSのとき不透明(opacity: 1)にするかです。

.iOSclass a:hover 
{opacity: 1;}

positionのcssでも同様です。

このへんは子テーマを使っているとか、親テーマのcssを触りたくないとか、いや{opacity: 1;}は気持ち悪いから親テーマも触ることにする、とかいろいろ個人の思いがあると思うので各自にお任せします。

※すぐにiOS9出ますけどね(笑)。まあ9で治っているとは限らないので一応の対処法です。

参考にさせていただきました。ありがとうございました。

情報源: CSS – iOS8.4.1以降でhoverにopacityを設定するとリンクがダブルタップしないと動いてくれない問題にでくわした話 – Qiita

コメント

タイトルとURLをコピーしました