{"id":1121,"date":"2016-08-26T10:24:24","date_gmt":"2016-08-26T01:24:24","guid":{"rendered":"https:\/\/n8finch2024.local\/?p=1121"},"modified":"2019-06-30T07:01:40","modified_gmt":"2019-06-29T22:01:40","slug":"disable-phone-number-linking-ios-safari","status":"publish","type":"post","link":"https:\/\/n8finch2024.local\/disable-phone-number-linking-ios-safari\/","title":{"rendered":"How to Disable Phone Number Linking in iOS Safari"},"content":{"rendered":"<p>I was working on a client&#8217;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.<\/p>\n<p>At first I thought I had messed up my\u00a0Sass styles\u00a0on the media query for small screens.<\/p>\n<p style=\"text-align: left;\">Then, I realized what was going on:\u00a0Safari in iOS was\u00a0highjacking the phone number linking styles so it could click to call!<\/p>\n<p style=\"text-align: center;\"><iframe class=\"giphy-embed\" src=\"\/\/giphy.com\/embed\/11XiZTEwZe15Mk\" width=\"480\" height=\"263\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p style=\"text-align: center;\">Thanks\u00a0<strong><a href=\"https:\/\/giphy.com\/gifs\/embarrassed-facepalm-movie-11XiZTEwZe15Mk\" target=\"_blank\" rel=\"noopener noreferrer\">GIPHY<\/a><\/strong>!<\/p>\n<p>Anyway, I took to Google, and this is a common problem.<\/p>\n<p>So, here&#8217;s what I did&#8230;<\/p>\n<p><!--more--><\/p>\n<h2>Step 1: Identify the Smell<\/h2>\n<p>Browsers do some pretty wonky things with certain elements (like <a href=\"\/changing-select-menus-cross-browser-compatibility\/\"><strong>dropdowns<\/strong><\/a> 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.<\/p>\n<p>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).<\/p>\n<h2>Step 2: Figure out how to wash it off<\/h2>\n<p>The\u00a0way to resolve this, according to the Apple Developer link below, is to put the following code in your <code>&lt;head&gt;<\/code>\u00a0element:<\/p>\n<pre class=\"brush: xml; title: Scroll right to see more code...; notranslate\" title=\"Scroll right to see more code...\">&lt;meta name=&quot;format-detection&quot; content=&quot;telephone=no&quot;&gt;<\/pre>\n<p>This is easy enough to copy-pasta into a <code>header.php<\/code>\u00a0file, but if you&#8217;re using Genesis, you need to use an action or filter to do that.<\/p>\n<p>NDB&#8230;<\/p>\n<h2>Step 3: Wash that smell right outta your site!<\/h2>\n<p>You can put this into your <code>functions.php<\/code>\u00a0file, or in a site functionality plugin:<\/p>\n<pre class=\"brush: php; title: Scroll right to see more code...; notranslate\" title=\"Scroll right to see more code...\">\/\/*Turn off phone number detection in iOS\r\nadd_action( 'wp_head', 'n8f_add_ios_phone_number_blocker_to_meta');\r\nfunction n8f_add_ios_phone_number_blocker_to_meta() {\r\necho '&lt;meta name=&quot;format-detection&quot; content=&quot;telephone=no&quot;&gt;';\r\n}<\/pre>\n<p>And voila! You&#8217;ve done it! Your results should resemble this<\/p>\n<p><a href=\"https:\/\/res.cloudinary.com\/fps\/image\/upload\/v1561845700\/jungsik-iOS-change_bhijym.jpg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-1156\" src=\"https:\/\/res.cloudinary.com\/fps\/image\/upload\/v1561845700\/jungsik-iOS-change_bhijym.jpg\" alt=\"jungsik-iOS-change\" width=\"900\" height=\"501\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Hope that was helpful. Happy copy-pasta-ing!<\/p>\n<p>&nbsp;<\/p>\n<h3>Helpful links<\/h3>\n<p><a href=\"https:\/\/developer.apple.com\/library\/safari\/documentation\/AppleApplications\/Reference\/SafariHTMLRef\/Articles\/MetaTags.html#\/\/apple_ref\/doc\/uid\/TP40008193-SW5\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/developer.apple.com\/library\/safari\/documentation\/AppleApplications\/Reference\/SafariHTMLRef\/Articles\/MetaTags.html#\/\/apple_ref\/doc\/uid\/TP40008193-SW5<\/a><\/p>\n<p><a href=\"https:\/\/stackoverflow.com\/questions\/22915881\/the-phone-number-is-not-shown-in-safari-on-ios\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/stackoverflow.com\/questions\/22915881\/the-phone-number-is-not-shown-in-safari-on-ios<\/a><\/p>\n<p><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/native-hardware\/click-to-call\/?hl=en\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/developers.google.com\/web\/fundamentals\/native-hardware\/click-to-call\/?hl=en<\/a><\/p>\n<p><a href=\"https:\/\/code.tutsplus.com\/tutorials\/mobile-web-quick-tip-phone-number-links--mobile-7667\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/code.tutsplus.com\/tutorials\/mobile-web-quick-tip-phone-number-links&#8211;mobile-7667<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I was working on a client&#8217;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\u00a0Sass styles\u00a0on the media query for small screens. Then, I realized what was going on:\u00a0Safari in [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1156,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[1,8],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Disable Phone Number Linking in iOS Safari | Nate Finch<\/title>\n<meta name=\"description\" content=\"Safari in iOS was highjacking the phone number linking styles so it could click to call! Anyway, I took to Google, and this is a common problem.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/n8finch-site.site.strattic.io\/disable-phone-number-linking-ios-safari\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Disable Phone Number Linking in iOS Safari | Nate Finch\" \/>\n<meta property=\"og:description\" content=\"Safari in iOS was highjacking the phone number linking styles so it could click to call! Anyway, I took to Google, and this is a common problem.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/n8finch-site.site.strattic.io\/disable-phone-number-linking-ios-safari\/\" \/>\n<meta property=\"og:site_name\" content=\"Nate Finch\" \/>\n<meta property=\"article:published_time\" content=\"2016-08-26T01:24:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-06-29T22:01:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/n8finch-site.site.strattic.io\/wp-content\/uploads\/2020\/11\/jungsik-iOS-change_bhijym.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"501\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Nate\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@n8finch\" \/>\n<meta name=\"twitter:site\" content=\"@n8finch\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nate\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/disable-phone-number-linking-ios-safari\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/disable-phone-number-linking-ios-safari\/\"},\"author\":{\"name\":\"Nate\",\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce\"},\"headline\":\"How to Disable Phone Number Linking in iOS Safari\",\"datePublished\":\"2016-08-26T01:24:24+00:00\",\"dateModified\":\"2019-06-29T22:01:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/disable-phone-number-linking-ios-safari\/\"},\"wordCount\":364,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce\"},\"articleSection\":[\"Blog\",\"Web Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/disable-phone-number-linking-ios-safari\/\",\"url\":\"https:\/\/n8finch-site.site.strattic.io\/disable-phone-number-linking-ios-safari\/\",\"name\":\"How to Disable Phone Number Linking in iOS Safari | Nate Finch\",\"isPartOf\":{\"@id\":\"https:\/\/n8finch.local\/#website\"},\"datePublished\":\"2016-08-26T01:24:24+00:00\",\"dateModified\":\"2019-06-29T22:01:40+00:00\",\"description\":\"Safari in iOS was highjacking the phone number linking styles so it could click to call! Anyway, I took to Google, and this is a common problem.\",\"breadcrumb\":{\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/disable-phone-number-linking-ios-safari\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/n8finch-site.site.strattic.io\/disable-phone-number-linking-ios-safari\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/n8finch-site.site.strattic.io\/disable-phone-number-linking-ios-safari\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/n8finch.local\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Disable Phone Number Linking in iOS Safari\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/n8finch.local\/#website\",\"url\":\"https:\/\/n8finch.local\/\",\"name\":\"Nate Finch\",\"description\":\"All the things, keeping it clever...&#x1f913;\",\"publisher\":{\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/n8finch.local\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce\",\"name\":\"Nate\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/n8finch2024.local\/wp-content\/uploads\/2020\/11\/nate-pic_ykd6mq.jpg\",\"contentUrl\":\"https:\/\/n8finch2024.local\/wp-content\/uploads\/2020\/11\/nate-pic_ykd6mq.jpg\",\"width\":796,\"height\":792,\"caption\":\"Nate\"},\"logo\":{\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Disable Phone Number Linking in iOS Safari | Nate Finch","description":"Safari in iOS was highjacking the phone number linking styles so it could click to call! Anyway, I took to Google, and this is a common problem.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/n8finch-site.site.strattic.io\/disable-phone-number-linking-ios-safari\/","og_locale":"en_US","og_type":"article","og_title":"How to Disable Phone Number Linking in iOS Safari | Nate Finch","og_description":"Safari in iOS was highjacking the phone number linking styles so it could click to call! Anyway, I took to Google, and this is a common problem.","og_url":"https:\/\/n8finch-site.site.strattic.io\/disable-phone-number-linking-ios-safari\/","og_site_name":"Nate Finch","article_published_time":"2016-08-26T01:24:24+00:00","article_modified_time":"2019-06-29T22:01:40+00:00","og_image":[{"width":900,"height":501,"url":"https:\/\/n8finch-site.site.strattic.io\/wp-content\/uploads\/2020\/11\/jungsik-iOS-change_bhijym.jpg","type":"image\/jpeg"}],"author":"Nate","twitter_card":"summary_large_image","twitter_creator":"@n8finch","twitter_site":"@n8finch","twitter_misc":{"Written by":"Nate","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/n8finch-site.site.strattic.io\/disable-phone-number-linking-ios-safari\/#article","isPartOf":{"@id":"https:\/\/n8finch-site.site.strattic.io\/disable-phone-number-linking-ios-safari\/"},"author":{"name":"Nate","@id":"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce"},"headline":"How to Disable Phone Number Linking in iOS Safari","datePublished":"2016-08-26T01:24:24+00:00","dateModified":"2019-06-29T22:01:40+00:00","mainEntityOfPage":{"@id":"https:\/\/n8finch-site.site.strattic.io\/disable-phone-number-linking-ios-safari\/"},"wordCount":364,"commentCount":0,"publisher":{"@id":"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce"},"articleSection":["Blog","Web Development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/n8finch-site.site.strattic.io\/disable-phone-number-linking-ios-safari\/","url":"https:\/\/n8finch-site.site.strattic.io\/disable-phone-number-linking-ios-safari\/","name":"How to Disable Phone Number Linking in iOS Safari | Nate Finch","isPartOf":{"@id":"https:\/\/n8finch.local\/#website"},"datePublished":"2016-08-26T01:24:24+00:00","dateModified":"2019-06-29T22:01:40+00:00","description":"Safari in iOS was highjacking the phone number linking styles so it could click to call! Anyway, I took to Google, and this is a common problem.","breadcrumb":{"@id":"https:\/\/n8finch-site.site.strattic.io\/disable-phone-number-linking-ios-safari\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/n8finch-site.site.strattic.io\/disable-phone-number-linking-ios-safari\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/n8finch-site.site.strattic.io\/disable-phone-number-linking-ios-safari\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/n8finch.local\/"},{"@type":"ListItem","position":2,"name":"How to Disable Phone Number Linking in iOS Safari"}]},{"@type":"WebSite","@id":"https:\/\/n8finch.local\/#website","url":"https:\/\/n8finch.local\/","name":"Nate Finch","description":"All the things, keeping it clever...&#x1f913;","publisher":{"@id":"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/n8finch.local\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce","name":"Nate","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/n8finch.local\/#\/schema\/person\/image\/","url":"https:\/\/n8finch2024.local\/wp-content\/uploads\/2020\/11\/nate-pic_ykd6mq.jpg","contentUrl":"https:\/\/n8finch2024.local\/wp-content\/uploads\/2020\/11\/nate-pic_ykd6mq.jpg","width":796,"height":792,"caption":"Nate"},"logo":{"@id":"https:\/\/n8finch.local\/#\/schema\/person\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/posts\/1121"}],"collection":[{"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/comments?post=1121"}],"version-history":[{"count":6,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/posts\/1121\/revisions"}],"predecessor-version":[{"id":1840,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/posts\/1121\/revisions\/1840"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/media\/1156"}],"wp:attachment":[{"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/media?parent=1121"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/categories?post=1121"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/tags?post=1121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}