title: the best way to list a phone number for click-to-call on website
body: <p>On a responsive webpage I've built (based on the twitter-bootstrap) I have a number of elements that are not visible unless the page is viewed on smaller resolutions (ie. tablets and phones).</p>
  
  <p>I've found - at least with an iPhone running OS7 - that phone numbers are best left as numbers without a link.  The iPhone detects the number format as a phone number, adds it's own a href and when you press the number it asks you if you'd like to call it - <a href="http://imgur.com/PhENbe9" rel="nofollow">see screenshot 1</a>.</p>
  
  <p>But if I enclose my text or phone number in an a href with the tel: markup (as advised by numerous "experts"), when I click the link, nothing happens.  I have to long press the link (hold it down for longer than a second) and only then does it give me the different options for a phone number - <a href="http://imgur.com/4WAd2MH" rel="nofollow">see screenshot 2</a>.</p>
  
  <p>Can this be overcome? Or is there a better way to list phone numbers so that mobile devices can click to call them (in the least number of steps for the end-user)?</p>
  
  <p>Thanks </p>
  
  <p><strong><em>EDIT:</em></strong>
  After some further on page testing, I've found that the <code>&lt;a href="tel:xxxxxxxx"&gt;call link&lt;/a&gt;</code> is working OK - except for when it's in the navigation menu my page is using.
  The site switches to a drop-down style menu when it goes mobile and it is at the top of this unordered list that I have placed my call link. 
  eg. </p>
  
  <pre><code>&lt;nav&gt;
       &lt;ul&gt;
           &lt;li class="mobile-only"&gt;&lt;a href="tel:1800251800"&gt;Call now on &lt;i class="icon-phone"&gt;&lt;/i&gt; 1800 25 1800&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#section-home" class="active"&gt;Home&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#our-team"&gt;Team&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#our-services"&gt;Services&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#contact-section"&gt;Contact&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>I have <code>display:none;</code> set for <code>.mobile-only</code> in my stylesheet, and when <code>@media (max-width:768px)</code> is reached, I have <code>display:block;</code> set for <code>.mobile-only</code> (amongst other styles).</p>
  
  <p>So I think something in the nav bar or the code used to switch the nav bar between normal and mobile modes is stopping my call link from working properly.</p>
  
  <p>Any thoughts?</p>