場違いの質問でなければ教えていただきたく　スマホ表示で１タップで電話できる機能を置きたい

こんにちは、

教えて戴ければ幸いです。
現在WordPressではないCMSサイトで、
スマホアクセスの場合

各ページのフッター固定で、１タップで電話発信出来る様にしています。


イメージは添付画像の様にしています。
0641-0061_SP_TEL05g0.png　：電話ボタンイメージ
s934-500-088.PNG：スマホ操作イメージ

現状別のCMSサイトで、
＜link rel="stylesheet" href="＜?php echo $view->getThemePath()?>/css/telBtnFix.css"＞

をheader_top.phpに組み込み

CSSをスマホアクセスの場合のみ有効になる様にしています。

telBtnFix.css
/* .telBtnFix class telBtnFix.css JN add start 2018/06/24 ----------------------------- */

.telBtnFix {
	overflow: hidden;
	text-align: left;
	margin: 10px 3px 15px;  /* margin: 10px 3px 5px; … 「上」､「左右」､「下」を指定 35は空きすぎ15 */
	color: #FFF;
	position: fixed;  
    bottom:0;  
    left:0;
	text-align: center;
	width: 98%;
	z-index: 10;
}

 /* --------------------------- JN add end   2018/06/24 ---------------------------- */

以下のphpの中身を変換した部分です。

スマホの場合のみ「電話ボタン画像が表示され」タップで電話出来る様になっています。

※.（コード<>の<は、＜に変更しています。）

（電話番号は編集しています）


スマホ判定の部分が不明なのですが。
✅　0641-0061_SP_TEL05g0.pngが、添付の「電話ボタン画像」です。

✅　class="telBtnFix"　が、telBtnFix.cssで定義しているクラスです。

✅　他のclassはデフォルトでCMSに組み込まれているもので、用途は不明です。
　　（クラスhidden-*は非表示クラスだとは思います）

✅　このCMSはブロックエディタが標準で、編集時に画像表示の指定で行います。
　　　「ｖ」スマホ、「ｘ」タブレット、「ｘ」パソコンの様に指定
　　　（「ｘ」はチェックボックスにチェックを入れない意味です。）
　　　たぶん、hidden-smが、スモール：スマホ用、 hidden-mdが、ミィディアム：タブレット用、 hidden-lgが、ラージ；パソコン用のクラスで、編集時にon/offするためのものだと思います。　　　

　　　この様な指定をすると、スマホでアクセスした場合のみ、0641-0061_SP_TEL05g0.pngが表示されタップで電話をかけられます
✅　

＜div class="container">
 ＜div class="row">
  ＜div class="col-sm-12">

   ＜div class="hidden-sm hidden-md hidden-lg ccm-custom-style-container ccm-custom-style-main-541">

    ＜div class="ccm-custom-style-container ccm-custom-style-main-5793">
     ＜p>＜a href="tel:090-4603-9999">
       ＜picture>
         ＜source srcset="https://a-itc.info/application/files/4715/3196/8696/0641-0061_SP_TEL05g0.png" media="(min-width: 900px)">
         ＜source srcset="https://a-itc.info/application/files/4715/3196/8696/0641-0061_SP_TEL05g0.png" media="(min-width: 768px)">
         ＜source srcset="https://a-itc.info/application/files/4715/3196/8696/0641-0061_SP_TEL05g0.png">

         ＜img src="https://a-itc.info/application/files/4715/3196/8696/0641-0061_SP_TEL05g0.png" alt="タップで電話をかける" class="telBtnFix" height="60" onclick="goog_report_conversion('tel:090-4603-9999')" width="641">
         
       ＜/picture>
      ＜/a>＜/p>
    ＜/div>
   ＜/div>
  ＜/div>
 ＜/div>
＜/div>



教えて戴きたいのは、


1.この様なCSSをCocoon（WordPress）では可能でしょうか？

2.可能な場合、どのphpに組み込むべきか、またcssはどこに置けば良いかです。
　（このCMSでは、header_top.phpに組み込みました。）

3.できれば、どの様にしてスマホアクセスを判定すれば良いかヒントをいただきたいです。

　（スマホの場合固定の表示固定のクラス、以外は非表示固定のクラスを使うでも構いません）
＜style>
.hide{display:none;}
＜/style>
＜?php
$flag=0;
$class="";
if ($flag==0) $class="hide";
?>
＜input type="button" value="Accept" id="accept" class="＜?PHP echo $class; ?>">
の様な感じでしょうか？

※※※
場違いの質問だったらスルーしてください。