Telefoonnummer niet zichtbaar op Apple devices

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jan Smit

Jan Smit

21/07/2016 22:22:13
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
/*
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
<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 -->
Gewijzigd op 21/07/2016 22:47:06 door - Ariën -
 
PHP hulp

PHP hulp

20/06/2024 21:44:14
 
- Ariën  -
Beheerder

- Ariën -

21/07/2016 22:46:53
Quote Anchor link
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.
 
Marthijn Buijs

Marthijn Buijs

22/07/2016 09:01:39
Quote Anchor link
Mogelijk zoek je dit?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<meta name="format-detection" content="telephone=no">
 
Ward van der Put
Moderator

Ward van der Put

22/07/2016 09:12:32
Quote Anchor link
Met de tel URI voor telefoonnummers zou het tegenwoordig op alle smartphones goed moeten gaan:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
<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>
Gewijzigd op 22/07/2016 09:13:49 door Ward van der Put
 
Jan Smit

Jan Smit

23/07/2016 11:56:39
Quote Anchor link
Hoi,

Dit is de oplossing:

Deze code toevoegen aan je CSS style.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
a[href^=tel] {
    color: inherit;
    text-decoration: none;
}
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.