Telefoonnummer niet zichtbaar op Apple devices
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)
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
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 */
}
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)
1
2
3
4
5
6
7
8
9
10
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 -->
<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 -
Verder staat dus los van PHP, dus move ik dit topic naar het juiste forum.
Code (php)
1
<meta name="format-detection" content="telephone=no">
Code (php)
1
2
3
4
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>
<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
Dit is de oplossing:
Deze code toevoegen aan je CSS style.
Code (php)
1
2
3
4
2
3
4
a[href^=tel] {
color: inherit;
text-decoration: none;
}
color: inherit;
text-decoration: none;
}