02_iPhone6PlusFree1

iOS8.4.1で2クリックしないとリンクが飛べない問題のとりあえずの解決策 【WordPress用】

iOS8.4.1では、:hoverでopacityなどを設定していると、:hover動作が発動するのに1タップ、リンクを飛ぶのにもう1タップで計2タップしないとリンクが飛べなくなってしまいました。

この現象は数日前からWEB界隈では話題になってました。
なので一応知識としては問題が怒っているのは知ってましたが、自分ごととしてあまり認識できてなかったのでスルーしてました。

ここにきて、某ゼニエモンのアフィリンクがクリックでいない、と話題になったので、初めて危機感を覚えた次第です。

で、2つ目のリンクのto-Rさんでjavascriptによる解決方法が掲載されているのですが、今回はWordPressのfunctions.phpで解決する方法を書いておきます。

前提条件として

.hover:hover{
    opacity:0.6;
}

のように設定されている場合を想定しています。(適宜読み替えてください)

:hoverで透明化するコード自体を省いてしまうと、PCでのユーザビリティが低下するので、そうではなく、iOSデバイスを判定して、iOSのみ:hoverで透明化するのを無効化します。

functions.phpに以下を追加

//$is_ipadを追加
function is_ipad() {
    $is_ipad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
    if ($is_ipad) {
        return true;
    } else {
        return false;
    }
}

//$is_iphoneか$is_ipadがtrueの場合にwp_headにCSSを出力
if($is_iphone or $is_ipad){
    function noHoverForIos(){
        echo "<style>.hover{opacity:1 !important;}</style>"; //cssに合わせて適宜書き替えてください
    };
    add_action('wp_head', 'noHoverForIos');
}

何をやっているのか一応解説

WordPressでは$is_iphoneという関数があり、これでiPhoneかそうでないかを判別できます。
基本的にはコレを使ってiPhoneの場合は、.hoverのopacity(透明度)を1に固定するCSSをheadのwp_head箇所に自動出力させます。
これが後半部分のコードです。

ただ、これだとiPadには対応できないため、前半部分でiPadを判別する関数を作ってます。

WordPress以外の方や、opacityの制御の方法が違ったりクラス名が違う人は適宜読み替えてください。

とりあえず、iPhoneではこのコードで動いているのを確認しましたが、iPadは手元にないので未確認なのと、適当に書いたのでもしかしたらバグがあるかもしれないので何かあったら教えて下さい。

One thought on “iOS8.4.1で2クリックしないとリンクが飛べない問題のとりあえずの解決策 【WordPress用】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です