Discussion :

[dhillig]

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) . 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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[dhillig]

Bonsoir,
Les CSS fonctionnent, mes les "@media screen and (max-width: 767px )" n'agissent pas sur Iphone sens horizontal.
Pour ce qui est du SVG, je ne vois pas la solution
Bonne soirée,
dh

[dhillig]

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