Gérer la résolution d'écran en CSS/PHP

**guidav** · 22/03/2006, 14h30

Bonjour
Je développe un site pro, dont les utilisateurs sont normalement en 1280 mais parfois moins. J'ai trop d'informations a faire tenir pour les mettre dans une résolution inférieure (pour ceux qui vont me conseille de passer en résolution inférieure).
Je souhaite donc faire une feuille de style entièrement dynamique en php, qui prendrait comme arguments les résolutions horizontales et verticales.

Pour capter la résolution, je mixe php et javascript, mais je n'arrive pas à passer les arguments car je n'arrive pas à faire écrire dans le code html (seulement sur la page).

Si vous pouviez m'aider, merci beaucoup

Voici le code correspondant:

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
Javascript
function resolX()
{
	document.write(screen.width)
}
function resolY()
{
	document.write(screen.height)
}
 
PHP
$resolX = "<script>resolX()</script>";
$resolY = "<script>resolY()</script>";
<link rel="stylesheet" type="text/css" href="./scripts/style.php?resolX=<?php echo $resolX ?>&resolY=<?php echo $resolY ?>" media="screen">
 
CSS
session_start();
$ratioX = $_GET['resolX']/1280;
$ratioY = $_GET['resolY']/1024;
div {
font-size:<?php echo 11*$ratioX;?>pt;
}

**Oluha** · 22/03/2006, 16h14

**marsupix** · 22/03/2006, 16h38

si j'ai bien compris tu détecte la résolution du visiteur et ensuite tu veux charger différents css selon la résolution?

je sais pas si j'ai tout compris tes bouts de code (c'est un peu fouilli et du php dans le css j'y crois pas trop)

admettons que ta fonction resolX et resolY renvoient bien la résolution.
tu peux alors faire en php:

Code :

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

1
2
3
4
5
6
 
$res = 'script language="javascript" type="text/javascript">';  // on ouvre la balise script
$res .= 'resolX();'; //on ajoute la largeur
$res .= 'document.write("_")'; // on ajoute le _
$res .= 'resolY();'; // on ajoute la hauteur
$res .= '</script>';  // on ferme la balise script

et tu devrais avoir une variable $res = '1280_1024'; par exemple
(pas sûr mais à tester avec un echo $res par ex...)

une fois que tu as ta résolution sous cette forme
tu choisis le fichier css dynamiquement avec:

Code :

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

1
2
 
<link rel="stylesheet" type="text/css" href="fichierCSS_<?php echo $res; ?>.css" media="screen">

qui dans ce cas équivaut par ex à href="fichierCSS_1280_1024.css"

**guidav** · 22/03/2006, 16h50

Merci, j'ai réussi de mon côté dans le même temps.
Il s'agit de mettre dans le <head> le bout de code suivant :

Code :

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

1
2
3
4
 
<script language=JavaScript >
	document.write('<link rel="stylesheet" type="text/css" href="./scripts/style.php?resolX=' + screen.width + '&resolY=' + screen.height + '" media="screen">');
</script>

et dans le CSS

Code :

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

1
2
3
4
<?php
	$ratioX = $_GET['resolX']/1280;
	$ratioY = $_GET['resolY']/1024;
?>

Puis de mettre des fonctions de calcul dans le CSS, du type

Code :

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

font-size:<?php echo 11*$ratioX;?>pt;

Gérer la résolution d'écran en CSS/PHP

CSS

Discussions similaires

Partager

Partager