1485 sujets

Web Mobile et responsive web design

Problème chargement de feuilles de styles [HELP]

Bonjour,

Je suis en classe de terminale S et je vient vous demander un coup de main pour mon projet de fin d'année d'ISN pou pouces pour le bac que je dois rendre dans /moins d'une semaine. Mon projet consiste créer un site web pouvant être ouvert sur un écran d'ordinateur normal ( 15/17/18 pouces peut importe ) et sur mobile ( iphone 3gs ). J'ai donc la base de mon site en html et 2 feuille de style. Une pour le pc de bureau et une autre pour le mobile. Celle pour écran de pc de bureau est terminé et ne changera pas et celle pour mobile est a finir. Je test mon css mobile sur le développement web de mozilla en chargeant un émulateur d'un iphone 3GS. Et dans ce projet un test m'es demandé pour reconnaître si l'utilisateur possède un iphone ou un pc de bureau.

Voici donc mon problème, je n'arrive pas a faire ce test ! Je ne sais pas comment il faut faire et la manière dont il faut procéder pour que la bonne feuille de style ce charge en fonction du device qui ouvre ma page. J'ai regardé tout ce qu'il ce fait comment tuto, aide, astuces mais tout tourne autour des media queries et de la gestion des feuilles de styles en fonction de la résolution mais ce n'est pas ce qui est attendu pour mon projet. Auriez vous une solution a mon problème ? 
<!DOCTYPE html>
<html>
  <div id="content" >
		<div class="centercolumn">
		<div class="centercolumndecale">
  <head>
    <title>Projet-Isn</title>
<script language=javascript>
     if ((navigator.userAgent.match(/iPhone/i)) {
          <link href="mobile.css" media="all" rel="stylesheet" type="text/css" />
          <meta name=viewport content="user-scalable=no,width=device-width" />
     else {
          <link href="pc.css" media="all" rel="stylesheet" type="text/css" />
     }
</script>
	
  	</head>


Voici le début de ma page html. Mais la différentiation des feuilles de styles ne marche pas.. Smiley decu Un coup de main s'il vous plait c'est très urgent ! Smiley biggrin
Kolbax a écrit :
J'ai regardé tout ce qu'il ce fait comment tuto, aide, astuces mais tout tourne autour des media queries et de la gestion des feuilles de styles en fonction de la résolution mais ce n'est pas ce qui est attendu pour mon projet.


Quel courage Smiley smile
Si tout ce que tu cherches tourne autour des media-queries, c'est parce que justement les media-queries sont la solution proposée par le W3C pour résoudre exactement la problématique d'adaptation d'un site à un ordinateur ou mobile (ou écran de frigo dans un future proche ?) que tu as. En plus, le "mobile" se résume pas à un iPhone et même si tu peux détecter tous les terminaux via leur User Agent tu en as pour un moment Smiley cligne . En plus ils peuvent mentir (c'est des fourbes) et se faire passer pour d'autres appareils Smiley lol
En conséquence, je dirais que si tes profs attendent de toi que tu détectes un iPhone en JS en sniffant le user-agent et en chargeant en JS des feuilles de style, c'est tes profs qui ont un gros souci. Tu peux nous les envoyer, on leur expliquera gentiment Smiley cligne

Si maintenant c'est explicitement demandé que tu sniffes un iPhone et que tu lui charges une feuille de style rien que pour lui, c'est "normal" que ton script ne fonctionne pas, tu ne peux pas simplement déclarer tes balises link dans le JS, ce langage ne fonctionne pas comme ça.
Tu trouveras la réponse avec un script qui fonctionne dans ce topic : http://forum.alsacreations.com/topic-5-42449-1-resolu-Charger-feuille-de-style-CSS-via-javascript.html . Par contre au niveau perfs, utiliser du JS pour charger la feuille de style c'est pas la joie, et surtout, si l'utilisateur n'a pas de JS, paf, plus de feuille de style. En bref, si tu peux utiliser les media-queries sans que tes profs t'ennuient, fais le Smiley smile
Au passage, la balise meta viewport il vaut mieux la sortir de ton JS et la laisser pour toutes les tailles de site.

PS : je déplace vers le forum mobilité Smiley cligne
Modifié par Stéphanie W. (10 May 2013 - 17:16)
Sujet clos
Aller à