a href=tel → PCで表示させない方法

質問

スマホユーザーのことを考えて、a href=telを使い、電話番号をクリックすると自動的に電話ができるようにしました。

しかし、パソコン（ＩＥやサファリ、firefox)からクリックすると、このページはありませんという不細工な格好になってしまします。

a href=telをパソコンでは機能しないようにすることは可能でしょうか？

他のサイトで、CSSを使い、display:noneにすれば、パソコンでは表示されなくなるという説明がありました。しかし、ブラウザの表示がくずれてしまいました。

何か良い方法がありましたら、教えて下さい。

回答No.4

noname#187595 · ベストアンサー

私ならjsで、PCのときは電話番号（テキストだけ）表示、スマホのときはa href=telにします。

ヘッダに
<script type='text/javascript'>
function smtel(telno){
if((navigator.userAgent.indexOf('iPhone') > 0 ) || navigator.userAgent.indexOf('Android') > 0 ){
document.write('<a href="tel:'+telno+'">'+telno+'</a>');
}else{
document.write(telno);
}
}
</script>

番号を記述したいところに
<script type="text/javascript">smtel('***-****-****');</script>
'***-****-****＝電話番号

お礼

詳しく教えて頂き、ありがおとうございます！

参考にさせてもらいます！！

回答No.3

ORUKA1951

＞display:noneにすれば・・・【中略】・・・ブラウザの表示がくずれてしまいました。
　そりゃ他の部分のスタイルシートガおかしい。
　そもそもユーザーエージェントか、mediaqueryでスタイルシートを切り替えているなら、崩れる部分も書き直せばよい。
　ポカッと穴が開いてよければ
a[href="tel:********"]{visibility:hidden;}
***内にはHTMlのソースそのまま。
あるいは、<a href="tel:***" title="電話">なら
a[title="電話"]{visibility:hidden;}

お礼

ありがおとうございます！

もう一度、他の部分のスタイルシートを確認してみます。

スマホ対応は大変です・・・

回答No.2

b0a0a

display:none
の代わりに
visibility:hidden
はどうですか

お礼

ありがおとうございます！
やってみます！

回答No.1

basil

実現する方法は幾つかあるんですが、説明が厄介なので、うまくやってるサイトのソースを紐解いて真似するのが近道かもしれません。

クライアント側だけで実装するなら、ブラウザ環境をuseragentなどを手がかりにJavascriptなどで振り分けて、個別のCSSを反映させる、とかが一般的かもしれません。

お礼

ありがとうございます！
他のサイトも見て見ます！！