How to Disable Phone Number Linking in iOS Safari

I was working on a client’s site recently, and they sent me a screen shot with their address in the header of the site, saying the postal code was off center.

At first I thought I had messed up my Sass styles on the media query for small screens.

Then, I realized what was going on: Safari in iOS was highjacking the phone number linking styles so it could click to call!

Thanks GIPHY!

Anyway, I took to Google, and this is a common problem.

So, here’s what I did…

Step 1: Identify the Smell

Browsers do some pretty wonky things with certain elements (like dropdowns and other inputs). Each major browser is a little different, and it can be frustrating to try and figure out exactly what you need to do.

However, a quick Google search revealed that this is a common issue, and also offers how to solve it (see Helpful Links below for references).

Step 2: Figure out how to wash it off

The way to resolve this, according to the Apple Developer link below, is to put the following code in your <head> element:

<meta name="format-detection" content="telephone=no">

This is easy enough to copy-pasta into a header.php file, but if you’re using Genesis, you need to use an action or filter to do that.

NDB…

Step 3: Wash that smell right outta your site!

You can put this into your functions.php file, or in a site functionality plugin:

//*Turn off phone number detection in iOS
add_action( 'wp_head', 'n8f_add_ios_phone_number_blocker_to_meta');
function n8f_add_ios_phone_number_blocker_to_meta() {
echo '<meta name="format-detection" content="telephone=no">';
}

And voila! You’ve done it! Your results should resemble this