11548 sujets

JavaScript, DOM et API Web HTML5

[Réglé] Problème de chargement de css et de détection de device

Bonjour,

Je suis en train de coder une application pour ipad et iphone, et j'ai besoin de charger une feuille css en conséquence en fonction du device utilisé.

Je suis face à deux problème, le premier étant que la détection ne semble pas fonctionner, la seconde c'est que le style css ajouté dans la page ne semble pas pris en compte par le navigateur.

J'ai cherché un tas d'exemples et le code semble similaire au miens, donc je suis assez dubitatif, d'autant que je débute en javascript et que je ne cerne pas encore complètement les bonnes pratiques de la manipulation du dom.

Voici le code actuellement que j'utilise actuellement

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />

		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

		<title>iStream</title>


		<meta name="viewport" content="width=device-width; height=device-height; initial-scale=1.0" />
		<meta name="apple-mobile-web-app-capable" content="yes" />

		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico" />
		<link rel="apple-touch-icon" href="iOS_icon.png" />

		<!-- css -->
		<link href="css/jqtouch.css" rel="stylesheet" type="text/css" />

		<!-- javascript  -->
		<script src="js/jquery-1.6.1.js" type="text/javascript"></script>
		<script src="js/jqtouch.js" type="text/javascript"></script>
		<script src="js/jquery.jplayer.min.js" type="text/javascript"></script>
		<script src="js/istream.js" type="text/javascript"></script> 


	</head>
	<body>
		<div id="global">
		
		</div>
	</body>
</html>


et le js (qui est le fichier js/istream.js)
//vars
var ipadCss = "css/ipad.css",
	iphoneCss = "css/iphone.css",
	webCss = "css/default.css";

//fonctions de détection de device
function isiPad(){
	
	return (navigator.platform.indexOf("iPad") != -1);
    
}

function isiPhone(){
	
	return (navigator.platform.indexOf("iPhone") != -1);	
	
}

//fonction ajout de css
function cssAdd(css){
	return ('<link href="' + css + '" rel="stylesheet" type="test/css" />');
}


$(document).ready(function() { 
	if (isiPad()){
		$("head").append(cssAdd(ipadCss));
		
	}
	else if (isiPhone()){
		$("head").append(cssAdd(iphoneCss));
		
	}
		 else {
			 $("head").append(cssAdd(webCss));
			 
		 }
});


Donc premièrement, la détection du device ne fonctionne pas (et je ne sais pas trop comment la débuger, je sais juste que navigator.platform renvoie une string vide, ensuite, le style css est bien ajouté dans le document, mais il n'est pas pris en compte par le navigateur, j'ai pourtant vu un tas d'exemple utilisant la même méthode pour y parvenir, donc je n'arrive pas à voir où ça cloche...

La seule erreur que je peux détecter avec firebug, c'est lorsque je parcours le contenu de la page html, lorsque j'ouvre le style css qui a été ajouté dans la page avec javascript, c'est 
Échec du chargement de la source pour:  http://192.168.1.42/istream/css/iphone.css
Bien évidement, si j'ouvre directement le css dans le navigateur, il n'y a pas d'erreur du serveur.

What's wrong with my code? ><

Merci d'avance
Modifié par Koon (07 Jun 2011 - 03:01)
Je me répond à moi même pour signaler que le problème de détection de device est réglé. Après un peu plus de recherche, j'ai trouvé navigator.userAgent.indexOf qui lui fonctionne.

Reste ce problème de chargement de css qui est pour le coups plus obscure.
J'ai finit par trouvé... une faute de frappe malheureuse (test/css au lieux de text/css...)

Cela fonctionne maintenant, désolé d'avoir dérangé pour ça...
Modifié par Koon (07 Jun 2011 - 03:01)
Sujet clos
Aller à