Partage

Equivalant aux Media Queries pour HTML5 ?

Sujet résolu
5 décembre 2017 à 18:36:51

Bonjour.

Si j'ai bien compris, les Media Queries ne concernent que le CSS...

Y-a-t'il un équivalant aux Media Queries pour le HTML5 ?

Je travaille sous Windows 10 Famille x64.
5 décembre 2017 à 18:51:45

Je ne vois absolument aucune utilité à utiliser les media queries pour supprimer de l'HTML, décris mieux ton problème.
Envie de devenir un développeur de mods sur GTA V ? --> Développez votre premier mod sur GTA V
5 décembre 2017 à 19:04:38

les média Queries C'EST du CSS c'est comme background-color c'est du CSS.

Maintenant tu peux faire plusieurs fichiers CSS et dans ton HTML mettre sur ta balise un paramètre qui n'appelle ton fichier uniquement si le navigateur à la taille requise:

<link rel="stylesheet" type="text/css" href="theme.css" media="screen and (min-width:500px)">

voici un petit lien avec toute les formes.

-
Edité par GuillaumeBo1 5 décembre 2017 à 19:05:51

Un homme azerty en vaut deux.
5 décembre 2017 à 19:37:47

Le lecteur audio HTML5 seul ne me convenant pas du tout puisqu'il n'y en a aucun de pareil selon le navigateur, je veux utiliser tel ou tel lecteur selon le cas :

- soit la balise <object> : pour les navigateurs qui ne sont pas sur smartphone, car le résultat est similaire à chaque fois (un lecteur audio flash, que j'utilise actuellement) ;

- soit la balise <audio> : pour les navigateurs sur smartphone (le lecteur audio HTML5).

Les Media Queries permettent de différencier les smartphones des autres supports, ce qui aurait pu être intéressant mais ne permet de changer que le CSS ; c'est pourquoi j'ai parlé d'un "équivalant pour le HTML5".

Et après j'ai juste à charger le code HTML qui convient ; pour ça j'ai déjà un code javascript qui permet d'écrire le code HTML qui convient.

Il me manque juste la possibilité de différencier les smartphones des autres supports.

PS : J'ai bien essayé ceci mais ça ne marche pas correctement ; sur mon PC, le son est joué deux fois en même temps sur Mozilla Firefox et Google Chrome (fonctionne correctement sur Internet Explorer et Microsoft Edge) :

<object id="id_name" name="id_name" title="title" type="application/x-shockwave-flash" data="player.swf">
	<param name="wmode" value="transparent" />
	<param name="movie" value="player.swf" />
	<param name="flashvars" value="mp3=fichier_son.mp3&amp;autostart=1&amp;autoreplay=1" />
	<audio src="fichier_son.mp3" title="title" controls autoplay loop>
		Votre appareil ne permet pas l'affichage du lecteur audio.
	</audio>
</object>

-
Edité par The Scar BTC 6 décembre 2017 à 6:09:45

Je travaille sous Windows 10 Famille x64.
6 décembre 2017 à 0:32:50

j'ai un code PHP pour toi

ps: Voila je l'ai :D il est un peut long mais très compréhensible.

<?php
	$agent = $_SERVER['HTTP_USER_AGENT'];
	function Device() {
		// Detection de l'OS
		if(preg_match('/Linux/i',$agent)) {
			$os = 'Linux';
		}
		elseif(preg_match('/Mac/i',$agent)) {
			$os = 'MacOS';
		}
		elseif(preg_match('/iPhone/i',$agent)) {
			$os = 'iPhone';
		}
		elseif(preg_match('/iPad/i',$agent)) {
			$os = 'iPad';
		}
		elseif(preg_match('/Droid/i',$agent)) {
			$os = 'Android';
		}
		elseif(preg_match('/Unix/i',$agent)) {
			$os = 'Unix';
		}
		elseif(preg_match('/Windows/i',$agent)) {
			$os = 'Windows';
		}
		else {
			$os = 'Unknow';
		}
		return $os;
	}
	function Browser() {
		// Detection du navigateur
		if(preg_match('/Firefox/i',$agent)) {
			$br = 'Firefox';
		}
		elseif(preg_match('/Mac/i',$agent)) {
			$br = 'MacOS';
		}
		elseif(preg_match('/Chrome/i',$agent)) {
			$br = 'Chrome';
		}
		elseif(preg_match('/Opera/i',$agent)) {
			$br = 'Opera';
		}
		elseif(preg_match('/MSIE/i',$agent)) {
			$br = 'Internet Explorer';
		}
		else {
			$br = 'Unknow';
		}
		return $br;
	}
	function ActionDevise() {
		// Action quand OS est trouvé.
		if($os=='Linux') {
			echo "Ceci est fait lorsque l'OS est Linux. </br>";
		}
		if($os=='Mac') {
			echo "Ceci est fait lorsque l'OS est MacOS. </br>";
		}
		if($os=='iPhone') {
			echo "Ceci est fait lorsque l'OS est iPhone. </br>";
		}
		if($os=='iPad') {
			echo "Ceci est fait lorsque l'OS est iPad. </br>";
		}
		if($os=='Droid') {
			echo "Ceci est fait lorsque l'OS est Androïd. </br>";
		}
		if($os=='Unix') {
			echo "Ceci est fait lorsque l'OS est Unix. </br>";
		}
		if($os=='Windows') {
			echo "Ceci est fait lorsque l'OS est Windows. </br>";
		}
		if($os=='Unknow') {
			echo "Ceci est fait lorsque l'OS est Unknow. </br>";
		}
	}
	function ActionBrowser() {
		// Action quand le navigateur est trouvé
		if($br=='Firefox') {
			echo 'Ceci est fait lorsque le navigateur est Firefox. </br>';
		}
		if($br=='Chrome') {
			echo 'Ceci est fait lorsque le navigateur est Chrome. </br>';
		}
		if($br=='Opera') {
			echo 'Ceci est fait lorsque le navigateur est Opera. </br>';
		}
		if($br=='MSIE') {
			echo 'Ceci est fait lorsque le navigateur est Internet Explorer. </br>';
		}
		if($br=='Unknow') {
			echo "Ceci est fait lorsque le navigateur est Unknow. C'est la sécurité intégrée lorsque le type de navigateur n'est pas détecté. </br>";
		}
	}
	function ActionBrowserDevice() {
		// Action quand le navigateur et l'OS sont trouvés
		if($os=='Linux' and $br=='Firefox'){
			echo "Ceci est fait lorsque le navigateur est Firefox et l'OS est Linux. </br>";
		}
		if($os=='unknow'){
			echo "Ceci est fait lorsque le navigateur est unknow et l'OS est unknow. </br>";
		}
	}
?>

-
Edité par GuillaumeBo1 6 décembre 2017 à 0:54:14

Un homme azerty en vaut deux.
6 décembre 2017 à 6:06:11

GuillaumeBo1 a écrit:

j'ai un code PHP pour toi

ps: Voila je l'ai :D il est un peut long mais très compréhensible.

<?php
	$agent = $_SERVER['HTTP_USER_AGENT'];
	function Device() {
		// Detection de l'OS
		if(preg_match('/Linux/i',$agent)) {
			$os = 'Linux';
		}
		elseif(preg_match('/Mac/i',$agent)) {
			$os = 'MacOS';
		}
		elseif(preg_match('/iPhone/i',$agent)) {
			$os = 'iPhone';
		}
		elseif(preg_match('/iPad/i',$agent)) {
			$os = 'iPad';
		}
		elseif(preg_match('/Droid/i',$agent)) {
			$os = 'Android';
		}
		elseif(preg_match('/Unix/i',$agent)) {
			$os = 'Unix';
		}
		elseif(preg_match('/Windows/i',$agent)) {
			$os = 'Windows';
		}
		else {
			$os = 'Unknow';
		}
		return $os;
	}
	function Browser() {
		// Detection du navigateur
		if(preg_match('/Firefox/i',$agent)) {
			$br = 'Firefox';
		}
		elseif(preg_match('/Mac/i',$agent)) {
			$br = 'MacOS';
		}
		elseif(preg_match('/Chrome/i',$agent)) {
			$br = 'Chrome';
		}
		elseif(preg_match('/Opera/i',$agent)) {
			$br = 'Opera';
		}
		elseif(preg_match('/MSIE/i',$agent)) {
			$br = 'Internet Explorer';
		}
		else {
			$br = 'Unknow';
		}
		return $br;
	}
	function ActionDevise() {
		// Action quand OS est trouvé.
		if($os=='Linux') {
			echo "Ceci est fait lorsque l'OS est Linux. </br>";
		}
		if($os=='Mac') {
			echo "Ceci est fait lorsque l'OS est MacOS. </br>";
		}
		if($os=='iPhone') {
			echo "Ceci est fait lorsque l'OS est iPhone. </br>";
		}
		if($os=='iPad') {
			echo "Ceci est fait lorsque l'OS est iPad. </br>";
		}
		if($os=='Droid') {
			echo "Ceci est fait lorsque l'OS est Androïd. </br>";
		}
		if($os=='Unix') {
			echo "Ceci est fait lorsque l'OS est Unix. </br>";
		}
		if($os=='Windows') {
			echo "Ceci est fait lorsque l'OS est Windows. </br>";
		}
		if($os=='Unknow') {
			echo "Ceci est fait lorsque l'OS est Unknow. </br>";
		}
	}
	function ActionBrowser() {
		// Action quand le navigateur est trouvé
		if($br=='Firefox') {
			echo 'Ceci est fait lorsque le navigateur est Firefox. </br>';
		}
		if($br=='Chrome') {
			echo 'Ceci est fait lorsque le navigateur est Chrome. </br>';
		}
		if($br=='Opera') {
			echo 'Ceci est fait lorsque le navigateur est Opera. </br>';
		}
		if($br=='MSIE') {
			echo 'Ceci est fait lorsque le navigateur est Internet Explorer. </br>';
		}
		if($br=='Unknow') {
			echo "Ceci est fait lorsque le navigateur est Unknow. C'est la sécurité intégrée lorsque le type de navigateur n'est pas détecté. </br>";
		}
	}
	function ActionBrowserDevice() {
		// Action quand le navigateur et l'OS sont trouvés
		if($os=='Linux' and $br=='Firefox'){
			echo "Ceci est fait lorsque le navigateur est Firefox et l'OS est Linux. </br>";
		}
		if($os=='unknow'){
			echo "Ceci est fait lorsque le navigateur est unknow et l'OS est unknow. </br>";
		}
	}
?>

-
Edité par GuillaumeBo1 il y a environ 4 heures


Merci beaucoup pour ce script GuillaumeBo1, je vais le conserver bien au chaud pour plus tard :) ;

car en ce qui concerne le lecteur audio, je me suis penché sur la modification via javascript du lecteur HTML5 et pour l'instant ça a l'air de fonctionner correctement sur (et c'est ce que je voulais) Windows 10 avec MF, GC, IE et ME, ainsi que sur mon smartphone sous Android avec Firefox.

(Je dis "pour l'instant" car je n'ai pas encore complètement fini ; il me reste le volume, mais je pense le faire demain.

Enfin... Vu l'heure, je finirai "tout à l'heure". :p)

P.S. : Page test : https://www.thescar.fr/test/

-
Edité par The Scar BTC 6 décembre 2017 à 6:10:52

Je travaille sous Windows 10 Famille x64.
6 décembre 2017 à 13:10:14

le réglage su son ne fonctionne pas du moins sous Firefox.
Un homme azerty en vaut deux.
6 décembre 2017 à 14:44:23

Oui, je ne m'y suis pas encore attelé ; mais je suis sur le point de m'y mettre.

Au final ça devrait fonctionner sur Firefox :

Page du tutoriel que j'ai consulté -> https://openclassrooms.com/courses/dynamisez-vos-sites-web-avec-javascript/l-audio-et-la-video

Page de son lecteur -> https://course.oc-static.com/ftp-tutos/cours/javascript/part5/chap2/ex5.html

Le réglage du son sur Firefox avec le lecteur du tutoriel fonctionne pour moi.

Edit :

Eh voilà, ça fonctionne ! :D

Ceci dit j'ai encore des petits trucs à voir :

- comme attribuer un niveau sonore au chargement de la page (dans mon cas, en fonction d'une variable de session PHP),

- et aussi changer la couleur de la barre de volume, en fonction du niveau sonore sélectionné au chargement de la page ou par clic sur la barre de volume.

Quoi qu'il en soit, je pense garder cette méthode ; je passe donc ce sujet en résolu.

-
Edité par The Scar BTC 6 décembre 2017 à 23:21:30

Je travaille sous Windows 10 Famille x64.

Equivalant aux Media Queries pour HTML5 ?

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown