11548 sujets

JavaScript, DOM et API Web HTML5

Changer une image de fond automatiquement avec du Php

Bonjour,

Pour améliorer mon site et faire profiter les utilisateurs de leurs grands écrans je voudrais savoir si c'est possible de détecter la dimension de leur résolution d'écran et de charger du coup une autre feuille de style plus adaptée.

Je suppose que cela se fait avec du Php?

Vous allez me dire, t'as qu'à utiliser des % dans le positionnement et la dimension de tes <div>. Oui c'est peut-être une solution (que je n'ai pas essayée) mais je voudrais aussi que l'image d'arrière plan (introduite avec background-url dans le css) soit plus grande si un utilisateur vient avec une grande résolution.

Merci pour vos réponses.
Les informations relatives à l'affichage, dont la résolution/dimension d'écran sont coté clients, PHP n'a donc pas vision sur ce genre d'éléments.

Et de visu, je dirais même qu'il te faudra passer par JS pour une usine à gaz. Ca sent bon l'obligation de créer une image 2500x2500...
Bonjour,

Il faut effectivement utiliser du JavaScript, non pour détecter la résolution du poste, mais les dimensions du viewport du navigateur.

Un petit indice : 
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
Bonjour.

Il est possible de récupérer les valeurs de la résolution d'écran via ce bout de code.

<html>
<head>
<script type="text/javascript">
<!-- debut
	function resolution() {
		document.location="<?php echo $_SERVER['PHP_SELF']; ?>?width="+screen.width+"&height="+screen.height;
	}
// fin -->
</script>
</head>

<?php

	if(!isset($_GET['width']) and !isset($_GET['height'])){
		echo '<body onload="resolution();">';
	} else {
		echo '<body>';
		echo 'Votre résolution est ' . $_GET['width'] . ' * ' . $_GET['height'];
	}
	
?>

</body>
</html>


Il est également possible de définir un <body> différent selon les trouvailles via un switch case ou une série de if (), mais ça implique d'avoir une condition pour chaque résolution, ce qui représente pas mal de possibilités.

Attention, ce script récupère la taille de l'écran, et non la taille de l'espace du navigateur. Donc même si un utilisateur n'a pas son navigateur d'ouvert en grand, il faudra remplacer la ligne document.location par ça :

document.location="<?php echo $_SERVER['PHP_SELF']; ?>?width="+window.innerWidth+"&height="+window.innerHeight;


En attendant, ce code permet de travailler un peu à partir des valeurs $_GET['width'] et $_GET['height'], avec le défaut de s'inscrire en barre d'adresse, mais ça reste un exemple parmi tant d'autres.

Bon courage.
Modifié par aokle (04 Feb 2011 - 11:52)
Merci pour vos réponses détaillées.

Mais je crois que ma recherche va s’arrêter là, car ça devient trop compliqué pour moi et puis finalement l'utilisateur n'y gagnerait pas grand chose à avoir une image plus grande: elle est déjà bien assez grande!!
Sujet clos
Aller à