Discussion :

[francoishelary]

Bonjour,

Suis encore novice, et confronté à ce problème de taille de police en fonction des largeurs et hauteurs écran, donc à fortiori de l'utilisation de smartphone ou tablette, j'utilise ce script, je récupère la largeur de fenêtre, pour une largeur de 1400 j'ai une variable de valeur 1, cette variable sera proportionnelle à la largeur de la fenêtre et ajustera la taille en pixel des différentes classes, ça fonctionne mais est-ce correct ? merci

Code javascript :

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
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
/* TAILLE POLICE FONCTION LARGEUR FENETRE*/
function aff()
{
	var h="";
	var w="";
	/* ie */
	if (document.all){
	h=document.body.clientHeight;
	w=document.body.clientWidth;
	var ratbase = 1400;
	var lafen = w;
	var pcmdif = lafen/ratbase;
 
	if(document.getElementsByClassName) {
		var elmt1=document.getElementsByClassName("moinsmoins");
		for (i=0;i<elmt1.length;i++)
		{
		elmt1[i].style.fontSize = 11*pcmdif+"px";
		}
		var elmt2=document.getElementsByClassName("moins");
		for (i=0;i<elmt2.length;i++)
		{
		elmt2[i].style.fontSize = 12*pcmdif+"px";
		}
		var elmt3=document.getElementsByClassName("plus");
		for (i=0;i<elmt3.length;i++)
		{
		elmt3[i].style.fontSize = 36*pcmdif+"px";
		}
		var elmt4=document.getElementsByClassName("moinsplus");
		for (i=0;i<elmt4.length;i++)
		{
		elmt4[i].style.fontSize = 20*pcmdif+"px";
		}
		}
	/* dès que la fençetre est inferieure à une certaine largeur le site occuppe 100% de la largeur fenêtre*/		
	if( w < 900){
		document.getElementById('jscontainer').style.width = 100+"%";
	}
	else{
		document.getElementById('jscontainer').style.width = 60+"%";
	}
}
else
{
/* autres navigateurs */
w=window.innerWidth;
h=window.innerHeight;
var ratbase = 1400;
var lafen = w;
var pcmdif = lafen/ratbase;
 
	if(document.getElementsByClassName) {
		var elmt1=document.getElementsByClassName("moinsmoins");
		for (i=0;i<elmt1.length;i++)
		{
		elmt1[i].style.fontSize = 11*pcmdif+"px";
		}
		var elmt2=document.getElementsByClassName("moins");
		for (i=0;i<elmt2.length;i++)
		{
		elmt2[i].style.fontSize = 12*pcmdif+"px";
		}
		var elmt3=document.getElementsByClassName("plus");
		for (i=0;i<elmt3.length;i++)
		{
		elmt3[i].style.fontSize = 36*pcmdif+"px";
		}
		var elmt4=document.getElementsByClassName("moinsplus");
		for (i=0;i<elmt4.length;i++)
		{
		elmt4[i].style.fontSize = 20*pcmdif+"px";
		}
		}
	/* dès que la fençetre est inferieure à une certaine largeur le site occuppe 100% de la largeur fenêtre*/		
	if( w < 900){
		document.getElementById('jscontainer').style.width = 100+"%";
	}
	else{
		document.getElementById('jscontainer').style.width = 60+"%";
	}
}
}/* FIN  */

[NoSmoking]

Bonjour,

ça fonctionne mais est-ce correct ?

if (document.all) {

il y a longtemps que c'est dépassé !

Tu pourrais regarder du coté des Media Queries, en attendant un meilleur support des unités vw et vh.