1485 sujets

Web Mobile et responsive web design

Bonjour,

Voil j'ai un petit soucis : j'ai un site qui s'adapte en fonction de si il est lu depuis un PC ou un tablette. j'ai réussi à adapter tous ls éléments en fonction des dimensions grâce à "@media" dans le css.
Il me reste un soucis avec la publicité : je souhaiterai qu la publicité ne se charge pas quand la résolution est inférieur ou égal à 1024px.
Je ne veux pas utiliser du CSS car la pub ne doit pas se contenter de ne pas apparaitre, elle ne doit pas se charger pou éviter d'avoir des soucis avec la régie publicitaire.


j'ai pensé à ca :

<script type="text/javascript">
    if (window.innerWidth > 1024) {

LE CODE DE MA PUB ICI

    } else {}

</script>


avec cette pub dans le javascript :

		<!-- ma-regie 1.0 (728x90) (@1348087759) --><iframe width='728' height='90' style='width: 728px; height: 90px; margin: 0; padding: 0;' id='a523527f' name='a523527f' src='http://s007.maregie.com/ox/www/delivery/afr.php?refresh=45&zoneid=20335&amp;cb=MC_TAG' frameborder='0' scrolling='no'><a href='http://s007.maregie.com/ox/www/delivery/ck.php?n=aafac8d8&amp;cb=MC_TAG' target='_blank'><img src='http://s007.maregie.com/ox/www/delivery/avw.php?zoneid=20335&amp;cb=MC_TAG&amp;n=aafac8d8' border='0' alt='' /></a></iframe>


mais ca ne marche pas. peu etre qu'il ne faut pas laisser le code de la pub identique ?

Merci d'avance pour votre aide.

PS :Je précise que je ne connais rien en JS Smiley decu
Modifié par djibs13 (12 Feb 2013 - 00:12)
Salut,
Tu as un matchMedia() qui est spécialement conçu pour ce que tu veux faire. Smiley smile
Quelques liens pour en savoir plus:
http://www.alsacreations.com/article/lire/1500-matchmedia-javascript-media-queries.html
https://developer.mozilla.org/fr/docs/DOM/window.matchMedia
http://blog.goetter.fr/post/17367899155/detecter-le-device-width-en-javascript-mission

Et pour adapter aux anciens navigateur :
https://github.com/paulirish/matchMedia.js/

+++++

Edit :
une petite fonction pour avoir la taille de l’écran quelle que soit le navigateur:

function winDim() {
	var W,H,
		i = window,
		d = document,
		de = d.documentElement,
		db = d.body;
		
	if ( i.innerWidth ) { // autres que IE
		W = i.innerWidth;
		H = i.innerHeight;
	} else if ( de.clientWidth ) { // IE8
		W = de.clientWidth;
		H = de.clientHeight;
	}
	else { // IE6
		W = db.clientWidth;
		H = db.clientHeight;
	}

	return {w:W, h:H} ;
}


Et pour finir un petit site qui est vraiment une merveille avec pas mal de script utile :
http://webbricks.org/pages/catalogue/
Modifié par renard13 (20 Feb 2013 - 17:22)