Hoi,

Een nieuw probleem.
Op mijn site heb ik 2 telefoonnummers staan. Op de Samsung tablet, Samsung telefoons, LG etc en PC's worden de telefoonnummer gewoon goed weergegeven zoals dit ook in de code is aangegeven.

Alleen op een Apple device zijn de nummers niet zichtbaar maar wel aanklikbaar of bij 1 keer tikken zie je het nummer wel staan maar is de andere niet zichtbaar.

Welke code moet ik toevoegen zodat ook Apple devices mijn telefoonnummers goed tonen zoals de code ook goed werkt op andere apparaten.

Help!

Color code:
/*
Template: Hallooou HTML5 Responsive template
Author: Mauritius D'Silva <[email protected]>
Theme URI: http://www.mauritiusdsilva.com/themes/hallooou
Version: 1.0

*/


/*  ----------------------------------------------
            CSS TABLE OF CONTENTS
    ------------------------------------------------- */
/*
1:  Body and paragraph text color
2:  Primary color
3:  Hover color - Lighter or darker shade of Primary color for hover
4:  Secondary color
5:  Slider (Hero unit) overlay color (optional)
6:  Colors with opacity
7:  Dark color/Footer color
8:  Text selection color

/*
----------------------------------------------------- */

/* COLOR STYLES
/* ---------------------------------------------- */

/* 1:   Body and paragraph text color */
/* ---------------------------------------------- */

body,
.services-item p{
	color: #2d3736;
}

/* 2:   Primary color */
/* ---------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
a:hover,
a:focus,
.highlight,
.navbar-custom a,
.services-item i,
.client-info h4,
blockquote {
    color: #f24f00; /* Primary color */
}

.pace .pace-progress,
.overlay,
.products-container span.icon,
.full-project,
.project-navigation a:hover,
.our-clients,
.cta-two-section,
.full-project,
.btn-default,
.btn-overcolor,
.client-testimonials.owl-theme .owl-controls .owl-page span,
.recent-project-carousel.owl-theme .owl-controls .owl-page span,
.scroll-top a:link,
.scroll-top a:visited {
    background: #f24f00; /* Primary color */
}


.services-item:before {
    border-bottom-color: #f24f00; /* Primary color */
    border-left-color: #f24f00; /* Primary color */
}

.testimonials p.speech,
.btn-default,
.scroll-top a:link,
.scroll-top a:visited,
blockquote {
    border-color: #f24f00; /* Primary color */
}

.testimonials p.speech:before {
    border-top-color: #f24f00; /* Primary color */
    border-left-color: #f24f00; /* Primary color */
}


/* 3:   Hover color - Lighter or darker shade of Primary color for hover */
/* ---------------------------------------------- */

.btn-default:hover,
.btn-default:focus,
.btn-overcolor:hover,
.btn-overcolor:focus,
.scroll-top a:hover {
    border: 1px solid #000; /* Hover color */
    background: #000; /* Hover color */
}

.full-project:hover {
    background: #000; /* Hover color */
}

.btn-overcolor:hover{
    border: 1px solid #fff; /* Optional Hover border color */
}

/* 4:   Secondary color */
/* ---------------------------------------------- */

.our-clients {
    background: #235fa5; /* Secondary color */
}

.btn-outlined {
    border: 1px solid #235fa5; /* Secondary color */
    background-color: #235fa5; /* Secondary color */
}


.btn-outlined:hover,
.btn-outlined:focus{
	color:#306555; /* Secondary color */
    border: 1px solid #235fa5; /* Secondary color */
}



/* 5:   Slider (Hero unit) overlay color (optional) */
/* ---------------------------------------------- */

.overlay-detail{
	background: #000; /* optional color for overlay */
}



/* 6:   Colors with opacity - Set RGBA by generating values here--> http://hex2rgba.devoth.com/  */
/* ---------------------------------------------- */

/* RGBA of Primary color */
.navbar-custom.top-nav-collapse,
.carousel-control.left:hover,
.carousel-control.right:hover,
.team-member figure:hover figcaption,
.services-item:hover,
#cd-zoom-in, #cd-zoom-out{
	background-color: rgba(242,79,0, 0.9); /* RGBA of Primary color - opacity .9 */
}



/* 7:   Dark color/Footer color */
/* ---------------------------------------------- */

footer,
footer .copynote {
    background: rgba(45,55,54, .97); /* Dark color/Footer color */
}



/* 8:   Text selection color */
/* ---------------------------------------------- */

::-moz-selection {
    background: rgba(242,79,0, .7); /* RGBA of Primary color - opacity .7 */
}

::selection {
    background: rgba(242,79,0, .7); /* RGBA of Primary color - opacity .7 */
}

body {
    webkit-tap-highlight-color: rgba(242,79,0, .7); /* RGBA of Primary color - opacity .7 */
}


En dit is een stukje code van de html pagina:
<div class="col-md-4 contact-address">
                            <h3>Ons adres</h3>
                            <p>Straanaam
                                <br />Woonplaats
                                <br />Nederland</p>
                            <ul>
                                <li><span>Telefoon:</span>01234567890</li>
                                <li><span>Mobiel:</span>06 - 0000000000</li></br>
                            </ul>
                        </div><!-- /.contact-address -->

Heb je een praktisch voorbeeld die we kunnen zien? Op codepen.io of JSfiddle?

Verder staat dus los van PHP, dus move ik dit topic naar het juiste forum.
Mogelijk zoek je dit?

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

Met de tel URI voor telefoonnummers zou het tegenwoordig op alle smartphones goed moeten gaan:


<ul>
  <li><span>Telefoon:</span><a href="tel:+311234567890">0123 - 456 78 90</a></li>
  <li><span>Mobiel:</span><a href="tel:+31687654321">06 - 87 65 43 21</a></li></br>
</ul>
Hoi,

Dit is de oplossing:

Deze code toevoegen aan je CSS style.

a[href^=tel] {
    color: inherit;
    text-decoration: none;
}

Reageren