レスポンシブルデザインでhref smsをhref mailtoに変更しますか？

Question

デバイスがSMSをサポートしていない、つまりページが電話（iPhone、Androidなど）で表示されていない場合、href smsをhref mailtoに変更できますか？

私は、ページのURLを送信するためにSMSを使用する「叫ぶ」ボタンを作成しましたが、電話では表示されていないとき、つまりページが表示されているときにmailtoに変更します私はページとボタンのスタイルを外部CSSファイルを使用してい

<section id="shout"> 
    <button class="button shout"><a href="sms:?&body=mysite.com" class="shoutButton">Shout</a></button> 
</section> 

：などのタブレット、ノートパソコン、

にこれは私が一緒に石畳したコードです。それは私がそれを試したすべての携帯電話で動作するようだ、それはクールです。私は@mediaを使って調べましたが、それは正しい方法ではないようです。私は成功していない他の方法を試しました。私はそれをかなり良いものにしましたが、私のスキルはあまり良くありませんので、どんな助けもありがたいです。

感謝:)

Answer 1

あなたは、両方のリンクを作成し、唯一CSS @media queryに基づいて1を示すだろう。

/* Default Style (mobile first!) */ 
 
.phone { display:inline; } 
 
.desktop { display:none; } 
 

 

 
/* Desktops */ 
 
@media screen and (min-width:1024px) { 
 
    .phone { display:none; } 
 
    .desktop { display:inline; } 
 
}

<section id="shout"> 
 
    <button class="button shout phone"> 
 
     <a href="sms:?&body=mysite.com" class="shoutButton">Shout from Phone</a> 
 
    </button> 
 
    <button class="button shout desktop"> 
 
     <a href="mailto:something@something.com" class="shoutButton">Shout from Desktop</a> 
 
    </button> 
 
</section>