Using wp_is_mobile to display clickable number for mobile users

I am trying to display a html5 clickable phone number only for mobile websites. When the site is being viewed on desktop, I want to display the phone number just as text, not something that can be clicked on and rung. My code doesn’t seem to be working:

if ( $phone ) {
    if ( wp_is_mobile() ) {
    echo  "<a href='tel:$phone'  >$phone</a><br />";
    }else{
    echo '
    <div class="widget-textarea">' . $phone . ' </div> ';
     }
 }

The number displays as just text when viewed on a desktop, but the clickable html5 phone number for mobile, doesn’t display as clickable.

Any advice, please? Is this the best way of achieving this?