CSS et SVG au format mobile
Bonjour à tous,
J'ai sur ma page un logo au format SVG qui s'affiche parfaitement sur ordi/tablettes mais se trouve tronqué en bas de qq pixels quand la page est affichée sur smartphone.
Pour ce qui est des CSS "@media screen and (max-width: 480px )", elles ne fonctionnent pas (testé sur IPhone) :roll:. Les CSS pour tablettes, pas de prob !
Si quelqu'un peut m'éclairer...
Voici une partie des CSS (la balise header contient le logo) :
Code:
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
| header {
width: 90%;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
.logo {
width: 100%;
opacity: 0.6;
filter(opacity=60);
}
@media screen and (max-width: 1020px ) {
h1 {
font: lighter normal 40px 'Raleway', sans-serif;
}
.site {
top: -5px;
}
}
@media screen and (max-width: 767px ) {
h1 {
font: lighter normal 25px 'Raleway', sans-serif;
}
.site {
top: 0px;
}
h2 {
font: 10px montserrat-regular;
}
.footer {
bottom: 5px;
}
}
@media screen and (max-width: 480px ) {
h1 {
font: lighter normal 15px 'Raleway', sans-serif;
}
.site {
top: 0px;
}
h2 {
font: 10px montserrat-regular;
}
.footer {
bottom: 5px;
}
.logo {
top: -10px;
}
} |
Pour ce qui est du html, il est très court :
Code:
1
2
3
| <header>
<object data="img/niddiv.svg" type="image/svg+xml" class="logo">This browser sucks</object>
</header> |
Merci pour votre aide,
dh
Prob SVG réglé :) Mais pour ces qui est des Media Query :(
Bonsoir,
Pour le SVG, plus de problème s'il est inclus dans une balise <img>. Pour ce qui est du responsive sur Iphone, mes Media Query n'étaient pas bonnes.
En retravaillant ces Media Query sur la page, ça pourrait le faire;) Mais :
Question 1 : Les Meta Viewport agissent pas mal sur le... viewport des tablettes et Smartphones, mais la page devient non zoomable ! Une solution ?
Question 2 : impossible de trouver sur le net une liste de Media Query "de base optimale" (pour grand ecran retina, pour ecran standard, pour tablettes retina et standard... ne parlons pas de smartphones... un calvaire !!!
QUelqu'un aurait-il sous le coude un liste (via un site ?) des Media Query indispensables pour la majorité des viewports (ecran retina inclus););) ?
Merci pour votre aide et bonne soirée,
dh
