telリンクをPCで無効にする覚書 | - 2017/04/24
- レスポンシブデザインの場合、telリンクが、PCでもアクティブになってしまうのを
cssのみでtelリンクを無効にする方法の覚書
電話番号をかけさせたいときのhtmlは以下のようにします。
<p class="tel"> <a href="tel:0123456789">012-345-6789</a></p>
しかしこれだと、PCの時でもリンクしてしまいます。
以下のcssで PCは電話リンク無効(500px以上) スマホで電話リンク。
<style type="text/css"> .tel a, .mail a { cursor: default; pointer-events: none; } @media screen and (max-width: 500px) { .tel a, .mail a { pointer-events: auto; } } </style>
ブラウザIEは11からがサポートされていますが、 IE10以下のためにJSも
function setTelDisable(){ var $tel = $('a[href^="tel:"]'); $tel.attr('tabIndex', -1); $tel.on('click', function(e){ if($(window).width() > 500){ e.preventDefault(); } }); } setTelDisable();
|
|