ハイブリッドアプリの動き
webviewは画面を長押しするとコピーなどのメニューが表示され、そのときにバイブも発動するという特徴があります。
ネイティブではこのようにならないので、長押ししてメニューが出ればハイブリッドアプリってすぐバレます。
そこまで意識する必要はないかもしれませんが、アプリによっては長押しでコメントを削除できたりとイベントを付けていたりするので、コピーさせる必要がないならば切っておいた方が良いと思います。
コピーメニュー非表示とバイブ停止
* {
-webkit-user-select: none;
}
これでコピーメニューが表示されなくなりますし、バイブも発動しません。
ただこれだと、input要素に入力もできなくなるので、
input, textarea {
-webkit-user-select: auto;
}
としておきましょう。
notを使ってもOKです。
リンク長押し時のメニュー非表示
リンクを長押しすると違ったメニューが出る場合があります。
* {
-webkit-touch-callout: none;
}
これで出ないです。
ただバイブは発動するようでした。
気になるならaタグでのリンクはやめて違う要素でclickイベントで遷移するようにしてしまえばバイブは発動しません。
ハイライト停止
長押しするとその部分にハイライトがかかることがあります。
* {
-webkit-tap-highlight-color: transparent !important;
}
これでハイライト部分が透明になるので事実上ハイライトが消えます。
まとめ
ハイブリッドアプリを作るうえでwebviewの不必要な機能をcssでOFFにする方法を紹介しました。
知らないと設定することもないですが、簡単にできるのでデフォルトで設定しておきましょう。