[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.

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

Langage PHP

Vue hybride

Discussions similaires

Partager

Partager