[Tutoriel] Solution clé en main de gestion dynamique de la résolution ! [Tutoriel]

**guidav** · 27/07/2006, 18h40

Bonjour

Après vous avoir embêté pendant un bout de temps avec mes questions, je vous propose une solution complète de gestion dynamique de la résolution en php. Elle se base sur le fait qu'on peut écrire une feuille de style avec une extension .php au lieu de .css.
Elle nécessite absolument l'emploi de javascript pour récupérer la résolution de l'écran.

Le principe :
1. on détecte la résolution avec javascript
2. on la stocke dans deux variables de session (verticale, horizontale)
3. on passe par la feuille de style écrite en php
4. on adapte toutes les dimensions grâce à des fonctions php.

Vous êtes prêts ? Alors, en avant pour le code !

Le fichier resolution.php (écrit pour une résolution de développement de 1280*1024)

Code :

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
 
<?php 
	session_start();
 
	if (isset($_GET['resolX']))
	{
		$_SESSION['ratioX'] = $_GET['resolX']/1280;
		$_SESSION['ratioY'] = $_GET['resolY']/1024;
	}
 
	if (@$_SESSION['SAUT'] != 'OUI')
	{
		//test de la resolution
		if (empty($_SESSION['ratioX']) && empty($_SESSION['SAUT']))
		{
			echo '
			<SCRIPT language="JavaScript">
			function screen_mode() 
			{
			var w = "resolX=" + screen.width + "&resolY=" + screen.height;
			return w;		
			}
			document.location.href ="http://monsite/resolution.php?" + screen_mode();
			</SCRIPT>
			';
		}
		else
		{
			$_SESSION['SAUT'] = 'OUI';
			$redirection = "Location: index.php";
			header($redirection);	
		}
	}
 
?>

Le fichier fonctions.php (le retour est minimisé à 7, car en-dessous l'affichage n'est pas toujours bon)

Code :

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
 
<?
function resizeX($nombre)
	{
		if(isset($_SESSION['ratioX']))
		{
			$nombre = $nombre * $_SESSION['ratioX'];
			$nombre = max($nombre, 7);
		}
		return $nombre;
	}
 
	function resizeY($nombre)
	{
		if(isset($_SESSION['ratioY']))
		{
			$nombre = $nombre * $_SESSION['ratioY'];
			$nombre = max($nombre, 7);
		}
		return $nombre;
	}
?>

La feuille de style style.php : notez l'utilisation des fonctions resizeX() et resizeY() qui permettent d'adapter la taille horizontales et verticales des polices, des largeurs, etc. J'ai fait exprès d'adapter horizontalement la taille des polices, sinon l'écrasement est trop important. En effet, les ratios en X et en Y sont respectivement de 1.25 et de 1.33 lors du passage de 1280*1024 à 1024*768.

Code :

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
 
<?php
	session_start();
	include("../fonctions.php");
?>
 
* {
	margin: 0;
	font-family: arial,sans-serif,"Lucida Grande", Tahoma, Helvetica, Sans-Serif"Trebuchet MS", Verdana, ;
}
 
div {
font-size:<?php echo resizeX(11);?>pt;
}
 
.tableau10 {
	width=100%;
	height: <?php echo resizeY(10);?>px;
	border-width: 1px 1px 1px 4px;
	border-style: solid;
	border-color: #E4EBF6;
	background: #fff;
	overflow: none;
	border-radius:3px;
}

et maintenant le fichier index.php

Code :

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
 
<?php
	//si la résolution n'a pas été détectée, on redirige
	if (@$_SESSION['SAUT'] != 'OUI' )
	{
		$redirection = "Location: resolution.php";
		header($redirection);	
	}
?>
 
<html>
<head>
 
<link rel="stylesheet" type="text/css" href="./scripts/style.php">
 
</head>
 
<body>
<table width=<?php echo resizeX(1200);?>px>
<td>
	Ce tableau fait 1200 pixels de largeur en 1280*1024, mais seulement 960 en 1024*768
</td>
</table>
</body>
</html>

Voila, c'est tout.
N'hésitez pas à me faire part de vos commentaires.

**Tonio_35** · 27/07/2006, 18h43

Salut !

Dans quel cas exactement est il utile d'utiliser un .php au lieu d'un .css... Je pense que ton tuto va me servir...

Merci

**guidav** · 27/07/2006, 19h01

C'est utile dès qu'on veut faire une feuille de style dynamique. C'est très pratique pour gérer des skins, des couleurs (exemple pourri : un fond d'écran en couleur random !).
Sinon, on peut l'installer partout mais :
1. il faut avoir php sur le serveur !
2. la déclaration est un peu différente

**guidav** · 31/07/2006, 09h42

UP pour les modérateurs : à ajouter en codes sources ou FAQ (endroit approprié). Si nécessaire, je peux en faire un article, mais le code me paraît un peu simple pour ça.

**alexmorel** · 08/10/2006, 10h17

y de manque ça dans ton fichier style.php

Code :

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

1
2
 
header("Content-type: text/css; charset=iso-8859-1");

ça permet d'être compatible avec Firefox et autre navigateur qui ne fonctionne pas avec un css en .php

Sinon c'est chouette

**zyongh** · 08/10/2006, 10h25

Je récupère le code, je teste... dès que j'en ai le temps... et cela peut être très utile, notamment pour les PC portables qui ont une résolution spécifique.

...peut-être aussi pour la compatibilité entre navigateurs.

**pasjac** · 17/01/2007, 15h50

Bonjour,

J'ai un problème d'affichage de mon site avec l'intégration de ces scripts.

La solution m'interresse fortement, mais je n'arrive pas a la faire fonctionner.

@+

**guidav** · 18/01/2007, 17h52

Postez votre code, je vais essayer de voir ce qui se passe.

**pasjac** · 19/01/2007, 10h10

Guidav,

Je vous ai envoyé le code dans le MP, si besoin je renverrais sur ce post.

Merci

**guidav** · 19/01/2007, 11h23

As-tu ajouté le code suivant en haut de ta page et modifié le script "resolution.php" en conséquence ?
J'ai peut-être un peu modifié mon script chez moi, je ne sais plus ce que j'ai posté.

Code :

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

1
2
3
4
5
6
 
if (@$_SESSION['SAUT'] != 'OUI' )
{
	$redirection = "Location: resolution.php";
	header($redirection);	
}

Si ça ne marche pas, poste ici le code de ta page et ta version modifiée de resolution.php

**pasjac** · 19/01/2007, 12h01

Salut,

Ci joint mes codes sources que je viens de remettre car comme dit, je les avais enlevés pour pourvoir continuer de travailler.

Code :

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
<?php
session_start();
 
if (isset($_GET['resolX']))
{
$_SESSION['ratioX'] = $_GET['resolX']/1440;
$_SESSION['ratioY'] = $_GET['resolY']/900;
}
 
if (@$_SESSION['SAUT'] != 'OUI')
{
//test de la resolution
if (empty($_SESSION['ratioX']) && empty($_SESSION['SAUT']))
{
	echo '
	<SCRIPT language="JavaScript">
		function screen_mode()
		{
			var w = "resolX=" + screen.width + "&resolY=" + screen.height;
			return w;
		}
		document.location.href ="http://www.hbccbm.pasjac.info/Script/resolution.php?" + screen_mode();
	</SCRIPT>
	';
}
else
{
	$_SESSION['SAUT'] = 'OUI';
 
	$next_program = "../index.php";
	header("Location: $next_program");
}
}
 
?>

Code :

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
<?php
	//si la résolution n'a pas été détectée, on redirige
	if (@$_SESSION['SAUT'] != 'OUI' )
	{
		$next_program = "./Script/resolution.php";
		header("Location: $next_program");
	}
?>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 
<title>Handball Clud de Cadolive - Accueil - </title>
<meta name="description" content="Site du club de Handball de cadolive et du Bassin Minier.
Bouche du rhône, Provence.">
<meta name="keywords" content="Sport, Association, Handball, HBCCBM, Provence, ">
 
<meta name="generator" Content="PasJac (www.pasjac.info)">
<meta http-equiv="Content-Type" content="text/html; charset="iso-8859-1">
 
<?PHP
	include("./Include/menu_fr.inc");
	include("./Include/calendrier.inc");
	include("./Include/module.inc");
?>
 
<link rel="stylesheet" type="text/css" href="./script/style.php">
 
</head>
 
<div id='obj_12' style='position:absolute; left:205px; top:92px; width:200px; height:20px; z-index:12'>
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr><td align="left" valign="top"><font color="#FFFFFF" style="font-family:Georgia;font-size:16pt;text-decoration:none;"><span class='titre_rubrique'>Accueil</span></font></td></tr>
</table>
</div>
 
<div id='obj_13' style='position:absolute; left:200px; top:130px; width:750px; height:550px; z-index:13'>
<div id="Scrolling" style="position:relative; width:750; height:550; overflow: auto;">
<table border='0' cellpadding='0' cellspacing='0' width='100%' align='center'><tr><td>
</table>
 
<!--Contenue de la page||||||||||||||||||||||||||||||||||||-->
 
</FONT></P><A
href="http://hand-provence.org/index.php" target="_blank"><IMG height=25 alt=""
src="./Images/image_008.gif" width=300 align=left border=0></A></P></FONT>
 
</FONT></P><A
href="http://www.ff-handball.org/ffhb/index.php" target="_blank"><IMG height=38 alt=""
src="./Images/image_009.jpg" width=80 align=right border=0></A></P></FONT>
 
<P align=left><FONT face=Georgia size=2 color=#ffffff><BR><BR>
 
<BR><BR>Bienvenue à vous visiteur,<BR>
 
<BR>Vous êtes actuellement sur le site du Handball club de
Cadolive et du Bassin Minier(HBCCBM), dont le siège se situe à
Cadolive (13950), petit village de Provence situé entre Gardanne et Aubagne.<BR>
 
<BR>Vous trouverez toutes les informations nous concernant:
Calendrier des matchs, résultats, commentaires, photos, palmarès, détail de nos
équipes et plus encore...<BR>
 
<BR>Ce site en constante évolution, n'hésitez pas à revenir nous voir régulièrement.<BR>
 
<BR>Si vous êtes handballeur, n'hésitez pas à nous contacter pour avoir de plus amples informations car nous recrutons toute
l'année de nouveaux joueurs.<BR>
 
<BR>Le webmaster: pasjac<BR></P></FONT>
 
</FONT></P><A
href="http://www.c13hand.org/" target="_blank"><IMG height=68 alt=""
src="./Images/image_014.jpg" width=164  align=left border=0></A></P></FONT>
 
</FONT></P><A
href="http://www.france-police-handball.org/" target="_blank"><IMG height=177 alt=""
src="./Images/image_010.jpg" width=164 align=right border=0></A></P></FONT>
 
<!-- Fin du Contenue de la page||||||||||||||||||||||||||||||||||||-->
 
</body>
</html>

**guidav** · 19/01/2007, 16h39

Honnêtement, je ne vois pas.
Peut-être y a-t-il un problème dans l'utilisation de la fonction header() avec les ../ mais ça m'étonnerait beaucoup. Je vais chercher un peu.

**wamania** · 23/01/2007, 17h45

Ce script, bien qu'il puisse être pratique, ne reste qu'une astuce tirant plutôt vers la bidouille.
1) La résolution n'est pas l'affaire de PHP, ce n'est pas fait pour et c'est normal.
2) Le CSS gère ça très bien sans PHP
3) Ne pas confier une telle chose à du javascript
4) Tu utilises des redirections
5) Le code n'est pas valide XHTML

Pour l'HTML
- tu mélanges des <span> dans des <font>
- Certains tags en maj d'autres en minuscule
- Des aberrations :

Code :

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

1
2
3
<table border='0' cellpadding='0' cellspacing='0' width='100%' align='center'>
<tr><td> 
</table>

- Les attributs des balises doivent être entourées de " et pas de '
- Après le </head> on met un <body>
- Trop de contenu, on ne voit pas l'essentiel. (n'inclut pas de fichiers que tu ne fournis pas :

Code :

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

1
2
3
    include("./Include/menu_fr.inc");
    include("./Include/calendrier.inc");
    include("./Include/module.inc");

Bref, soigne un peu plus.

**guidav** · 24/01/2007, 09h54

Envoyé par wamania

Ce script, bien qu'il puisse être pratique, ne reste qu'une astuce tirant plutôt vers la bidouille.
1) La résolution n'est pas l'affaire de PHP, ce n'est pas fait pour et c'est normal.
2) Le CSS gère ça très bien sans PHP
3) Ne pas confier une telle chose à du javascript
4) Tu utilises des redirections
5) Le code n'est pas valide XHTML

Oui, c'est une bidouille, mais propose moi plutôt des solutions détaillées pour redimensionner des tableaux, des div, des polices... à la volée en fonction de la résolution de l'utilisateur, valables pour toutes les résolutions. Le tout compatible avec un moteur de template, une classe de génération de tableau et des tableaux partout.
J'ai développé un intranet qui avait besoin de cette fonctionnalité, dans un monde qui utilise IE et javascript
Je propose mon code, mais je suis ouvert à toute proposition plus adaptée.

**wamania** · 24/01/2007, 10h56

Bon d'accord, j'ai été un peu méchant, c'était pas le but.
Ce script fonctionne, c'est indéniable.
Personnellement,
- je ne modifierais pas la taille des polices, ça simplifie^^
- Je n'aurais pas de tableaux, mais uniquement des div, span, p, form et autres éléments de style XHTML, permettant un plaçage et un dimensionnement absolu ou relatif.

La solution que je préconiserait dans ton cas est bien de réécrire un feuille de style dynamiquement, mais pas avec PHP.
Autant tout laisser coté client.

C'est un peu brouillon et vieux, mais ça donne un exemple
http://www.wamania.com/risk/style/risk.js

**guidav** · 24/01/2007, 11h52

Ta solution est en effet très intéressante, dans le cas où on a peu de types d'éléments. Typiquement, elle est parfaitement adaptée à un CMS, gestion de news, forum...

Malheureusement elle est très difficile à appliquer dès qu'on a des tables de données à afficher (c'est mon cas : sur ma page, il y a 5 tables de données affichées dans des div, impossible de les gérer avec des div).
Si on applique une classe de dimensionnement à un tableau, il faut absolument définir la taille des cellules en pourcentage.
Ca implique de ne JAMAIS changer la largeur des colonnes, ni d'ajouter/retirer de colonnes (ce qui m'arrive souvent en fonction des besoins des utilisateurs), sinon ça implique de recalculer tous les pourcentages, sans parler des essais nécessaires en amont !

L'intérêt de ma méthode est la définition des fonctions resizeX et resizeY, qu'on peut ensuite utiliser partout. En plus, la maintenance du CSS est plus simple !
L'inconvénient, c'est en effet que ce n'est pas 100% propre. Mais bon je n'ai aucune formation en html, et surtout j'ai la chance d'avoir des utilisateurs qui n'ont pas le choix du navigateur !

Enfin l'idéal, ça serait de tout refaire en AJAX et de laisser l'utilisateur redimensionner à la souris les éléments du site, mais c'est une autre histoire...
(pour info j'ai testé mon site sous FF, il est très laid !)

**Yogui** · 24/01/2007, 21h48

Salut

Envoyé par wamania

- Les attributs des balises doivent être entourées de " et pas de '

Il me semble que c'est faux : les doctypes ne refusent pas les apostrophes du moment que l'on reste cohérent (un couple d'apostrophes ou un couple de guillemets, mais pas de mélange).

**wamania** · 25/01/2007, 10h36

Grrrrrr, c'est qu'en plus, tu as raison...et pourtant j'ai cherché.

http://www.w3.org/TR/xhtml1/#diffs

4.4. Attribute values must always be quoted

All attribute values must be quoted, even those which appear to be numeric.
CORRECT: quoted attribute values
<td rowspan="3">

INCORRECT: unquoted attribute values
<td rowspan=3>

Ils disent pas que les doubles sont obligatoires, mais ils en mettent quand même naturellement

**Yogui** · 25/01/2007, 12h00

Disons qu'il est plus commun de demander au langage de script de produire " à partir de ", plutôt que de le faire pour une apostrophe (dont je ne connais d'ailleurs pas l'entité HTML).
Du coup, il est plus facile de mettre des " dans un attribut HTML, même lorsque c'est " qui délimite la valeur. Pour mettre des ' dans un attribut HTML délimité par des ', le seul moyen est d'utiliser l'antislash... Pas très joli

Code XML :

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

<citation valeur="& quot;Publiez vos articles, tutoriels et cours et rejoignez-nous dans l'équipe& quot;" />

Code XML :

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

<citation valeur='"Publiez vos articles, tutoriels et cours et rejoignez-nous dans l\'équipe"' />

--> Le deuxième exemple est clairement moins efficace.

**pasjac** · 01/02/2007, 15h19

Super,

Mais cela ne m'a pas aidé dans mes recherches, je lis simplement, que je fais une copie de mon code, et désolé pour les "includes", mais je n'ai pas soustrait cela quand j'ai fait mon post. De plus je sais que je suis en "PHP", mais pas en informatique un débutant, et que je ne connait pas tous les astuces de code, mais entre "" et '' et je n'ai pas encore vu et lu que cela ne fonctionnait pas.

J'ai retailler mon site en 1024 * 768 à la main, je me consacrerais plus tard à reprendre ce sujet.

Et pour finir, je pense que les gens qui écrivent des post incendiaires pour expliquer et apprendre aux autres, manquent de pratiques, heureusement que je pratique pas comme cela avec mes équipes de développement ou les prestataires travaillant pour moi.

Vous en souhaitant bonne réception.

Merci Guidav pour le temps passés, je reprendrais contact plus tard pour faire fonctionner votre "Bidouille", car elle m'intérresse beaucoup.

Merci

[Tutoriel] Solution clé en main de gestion dynamique de la résolution ! [Tutoriel]

Langage PHP

Discussions similaires

Partager

Partager