Detecter resolution d'ecran et charger un .css en fonction

Signaler
Messages postés
10
Date d'inscription
samedi 22 novembre 2008
Statut
Membre
Dernière intervention
24 novembre 2008
-
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
-
Yop !

Alors voila j'ai une question, je suis actuelement entrain de développer mon site, j'ai de solides connaissances en HTML/CSS, j'attaque un peu de JAVASCRIPT et je suis un peu perdu. Je souhaiterai intégrés un code javascript qui me permetterai de detecter automatiquement la résolution d'ecran et charger un fichier .css en fonction.

Alors voila mon code JS actuel :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Titre de mon site</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
    <SCRIPT LANGUAGE=Javascript SRC="fichiers.js"> </SCRIPT>
    <script>
      function loadBackground(){
      hauteur = screen.height;
      largeur = screen.width;
      var myBackgroundImage = "backgroundDefault.jpg"
      if(hauteur==1024 &amp;&amp; largeur==1280){
        myBackgroundImage = "css/design_orange.png"
      }
      if(hauteur==600 &amp;&amp; largeur==800){
        alert("test");
        myBackgroundImage = "css/design_orange_2.png"
      }
      window.document.getElementsByTagName("body")[0].style.backgroundImage = "url("+myBackgroundImage+")";
    }
  </script>


    </head>

mon texte...

<script>
  loadBackground();
</script>
</html>


Comme vous le voyez suremet je sais détecter la resolution d'écran et charger une imae en fonction, seulement moi je voudrai charger un CSS, sauriez vous m'aider ?

Merci d'avance

12 réponses

Messages postés
10
Date d'inscription
samedi 22 novembre 2008
Statut
Membre
Dernière intervention
24 novembre 2008

J'ai oublier de dire que j'ai déja essayer la méthode avec les pourcentages, elle marche mais je prefere utiliser la méthode ci-dessus qui pour ma part me permettera de faire un design exelent pour chaque resolutuion. Voila c'était juste une précision en vue de future réflexion a ce sujet.

Merci d'avance
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
>>seulement moi je voudrai charger un CSS
ou alors adapter le css ?         balise_concerné.className="le css adapté"

ce n'est d'ailleurs en général pas une bonne idée ( il me semble, mais mon
avis ne vaut pas grand chose ! ) d'être obligé de tenir compte de la résolution
d'un écran de l'utilisateur...
perso, je ne navigue qu'avec une fenêtre réduite, dans des onglets,
       j'interdis tout redimensionnement... ( je ne dois pas être le seul )

Cordialement

        
Messages postés
10
Date d'inscription
samedi 22 novembre 2008
Statut
Membre
Dernière intervention
24 novembre 2008

non je voudrai charger un fichier css celon la resolution d'ecran et pas adapter celui que j'ai deja.

Merci de ta reponse
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
moins simple....

_ possible en javascript.... avec IE, mais pas avec les autres navigateurs je pense.
_ en interaction avec le serveur, mais dommage de faire un aller-retour pour ça.
( appel page.php avec paramètre=résolution, qui renvoie ce qu'il faut )
je ne vois pas de réponses satisfaisantes à brule-pourpoint...

faut y penser un peu, si ça se trouve c'est bête comme chou !

mais en quoi modifier cela pourrait-il gêner ?

         
Messages postés
10
Date d'inscription
samedi 22 novembre 2008
Statut
Membre
Dernière intervention
24 novembre 2008

Bah disont que si je reste avec mon desgin, si je change de resolution, mon design en lui même est correct, mais mes balise texte et menu ne le sont pas, elle sont toute décalé et ne sont correcte qu'avec un affichage 1024X1280. Et ce même avec les pourcentage comme valeur.

mon CSS :

body
{


   width: 100%;
   height: 80%;
   margin: auto;
   background-image: url("css/design_orange.png");
   background-color: black;
   background-position: top center;


   background-repeat: no-repeat;
}


div {
width: 80%;
max-width: 1000px;
min-width: 700px;
}




ul
{
   width: 100%;
   position: absolute;
   left: 9%;
   top: 5%;
   font-family: "Segoe UI", Comic Sans MS, arial, arial black;
   font-size: 17px;
   list-style-type: none;


}




p
{
   background-color: orange;
   border: 1px solid black;
      width: 38%;
   border: 1px solid black;
   text-align: justify;
   padding: 12px; /* Marge intérieure de 12px */
   font-size: 14px;
   font-family: "Comic Sans MS";
   position: absolute;
   left: 30%;
   top: 22%;
}




h1
{
   font-style: italic;
   font-family: "Arial Black", Arial, Verdana, serif;
   text-align: center;
}
blockquote p
{
   text-align: justify;
   text-indent: 25px;
}


img.centered {
   display: block;
   margin-left: auto;
   margin-right: auto }
Messages postés
1784
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
28 avril 2021
126
essai avec screen.height et screen.width
exemple d'utilisation

<html>
 <head>
<script>
function resolution(){
alert(screen.width+'x'+screen.height)
}
</script>
</head>

appui

</html>
Messages postés
10
Date d'inscription
samedi 22 novembre 2008
Statut
Membre
Dernière intervention
24 novembre 2008

Merci mais ton script ne sert qu'a detecter la resolution d'ecran de l'internaut, j'aais deja mis cette fonction dans mon script, ce que je cherche maintenant c'est changer de fichier .css en fonction de la resolution d'ecran du visiteur.

merci de ta reponse
Messages postés
1784
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
28 avril 2021
126
et de cette facon a tu essayer

<script type="text/javascript" language="javascript">
document.write("<link rel='stylesheet' href='repertoire/monfichier.css' type='text/css'>");
}
</script>

bien evidement tu adapte par des conditions selon la resolution (sa va en faire des conditions)
Messages postés
10
Date d'inscription
samedi 22 novembre 2008
Statut
Membre
Dernière intervention
24 novembre 2008

Nan ça ne fonctionne pas, voici le codage que j'ai fait :

    <script>
function resolution(){
hauteur = screen.height;
      largeur = screen.width;
      if(hauteur==1024 && largeur==1280){
      document.write("<link rel='stylesheet' href='800x600.css' type='text/css'>');
  </script>
Messages postés
1784
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
28 avril 2021
126
met le tout hors d'une fonction
Messages postés
10
Date d'inscription
samedi 22 novembre 2008
Statut
Membre
Dernière intervention
24 novembre 2008

Comme ca ?  
<script>
      hauteur = screen.height;
      largeur = screen.width;
      if(hauteur==1024 && largeur==1280){
      document.write("<link rel='stylesheet' href='800x600.css' type='text/css'>");
    </script>

ps: desoler si ca n'est pas ça mais je débute en JS
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
ah ben oui... même pas pensé au document.write ! ...
<script type="text/javascript">
if ( screen.height==??? && screen.width==??? )
{     document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="le .css voulu">'); }
</script>