Sélection fichier CSS suivant la device et son orientation

Résolu/Fermé

reedbedroom Messages postés 80 Date d'inscription lundi 11 juillet 2011 Statut Membre Dernière intervention 1 janvier 2020 - Modifié par reedbedroom le 2/12/2013 à 13:20
reedbedroom - 4 déc. 2013 à 11:17

Bonjour,

Je développe actuellement un site qui change d'aspect suivant le support sur lequel il est consulté.

Je voudrais donc pouvoir sélectionner un fichier CSS en fonction du support et de son orientation (Paysage ; Portrait).

Voici mon code (choix du CSS) :


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

<link rel="stylesheet" type="text/css" media="only screen and (min-width: 768px) and (max-width: 1280px) and (orientation : landscape)" href="styleTabLand.css" />

<link rel="stylesheet" type="text/css" media="only screen and (min-width: 768px) and (max-width: 1280px)  and (orientation : portrait)" href="styleTabPort.css" />

Malheureusement cela ne fonctionne pas ... aucune différence entre le paysage et le portrait sur un iPad...

Quelqu'un aurait la solution pour cela ?

Merci a tout le monde.

Développeur Web Freelance - www.iwebu.com

A voir également:

Sélection fichier CSS suivant la device et son orientation
Fichier rar - Guide
Comment réduire la taille d'un fichier - Guide
Fichier host - Guide
Comment ouvrir un fichier epub ? - Guide
Fichier iso - Guide

3 réponses

Réponse 1 / 3

mpmp93 Messages postés 6648 Date d'inscription mercredi 13 avril 2011 Statut Membre Dernière intervention 28 septembre 2015 1 339
3 déc. 2013 à 14:19

Bonjour,

la solution c'est pas plusieurs CSS, mais un seul avec ce qu'on appele les media-queries en CSS.

A+

reedbedroom Messages postés 80 Date d'inscription lundi 11 juillet 2011 Statut Membre Dernière intervention 1 janvier 2020 98
3 déc. 2013 à 15:23

mouais ... cette réponse n'apporte pas grand chose de plus. Surtout que les deux solutions sont possibles ;)

Merci quand meme

Réponse 2 / 3

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
3 déc. 2013 à 15:13

Salut
mpmp93
non non on peu tout a fait le mettre en css externe !

reedbedroom
essaye avec -device-width : ce qui de toute facon est preferable a width: seul , qui va emm....der le visiteur qui surfent sur son écrans 27" !!

<link rel="stylesheet" media="only screen and (min-device-width : 768px) 
and (max-device-width : 1024px)and (orientation : landscape) "href="styleTabLand.css" />

<link rel="stylesheet" media="only screen and (min-device-width : 768px) 
and (max-device-width : 1024px) and (orientation:portrait)"
href="styleTabPort.css" />

et n oublie pas le viewport dans les head!

<meta name="viewport" content="width=device-width" />

reedbedroom Messages postés 80 Date d'inscription lundi 11 juillet 2011 Statut Membre Dernière intervention 1 janvier 2020 98
3 déc. 2013 à 15:24

Bonjour

Merci, je vais tester tout ça ! Je ne sais pas si cela suffiras à différencier le mode paysage du mode portrait. Mais je te dis dés que j'ai testé !

Merci.

mpmp93 Messages postés 6648 Date d'inscription mercredi 13 avril 2011 Statut Membre Dernière intervention 28 septembre 2015 1 339
3 déc. 2013 à 16:01

Allez voir ici:
https://www.alsacreations.com/article/lire/930-css3-media-queries.html

Vous utilisez un seul css....

cependant, en tête de page HTML il faut mettre ceci:

<!DOCTYPE html>
<html lang="fr">
<head>
<title>....</title>
....suite en-tête...

<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=yes"/>

...fin en-tête....
</head>
<body>
</body>
</html>

Les deux lignes en gras sont indispensables!

la première autorise le navigateur à changer la position verticale-horizontale et l'adaptation aux différentes dimensions

la seconde ligne ordonne au navigateur de s'adapter aux dimensions de l'écran. Si on le tourne, il suit.

Enfin je CSS avec exemple de media-queries:

.threeCols {   /* gère l'affichage bloc de texte sur trois colonnes */
    -webkit-column-count: 4;
    -webkit-column-rule: 1px dotted #b0b0b0;
    -webkit-column-gap: 16px;
    -moz-column-count: 4;
    -moz-column-rule: 1px dotted #b0b0b0;
    -moz-column-gap: 16px;
    column-count: 4;
    column-rule: 1px dotted #b0b0b0;
    column-gap: 16px;
    padding-bottom: 6px;
    border-bottom: 1px dotted #7f7f7f;
    margin-bottom: 12px;
    margin-top: 6px;
}

@media only screen and (max-width: 1110px) {
    /* Style appliqué uniquement sur les écrans de moins de 1110px de largeur */
    .threeCols {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (max-width: 740px) {
    /* Style appliqué uniquement sur les écrans de moins de 740px de largeur */
    .threeCols {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (max-width: 370px) {
    /* Style appliqué uniquement sur les écrans de moins de 740px de largeur */
    .threeCols {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}

la classe treeCols affiche sur 4 colonnes si on a un écran extra-large, 3 colonnes si on a écran 16/9 ou 16/10 de moins de 1200px, réduit à 2 colonnes si on retourne la tablette verticalement et reduit à 1 colonne sur un tel mobile, ce pour le contenu d'un DIV.

je l'ai mis en application ici:
https://camping-car.org/agenda

Mettez le navigateur Firefox ou Chrome en "pas plein écran" et réduisez la largeur, le nombre de colonnes change tout seul! Idem sur une tablette: en horizontal, on a 3 colonnes, en vertical, on n'en a plus que deux.

En gérant bien ses media-queries on n' aplus besoin de faire deux sites:
- un pour mobiles
- un pour ordinateur

Je reviens sur les deux lignes HTML que j'ai mis en gras plus haut. de GRANDS SITES tels live.fr ou hotmail.fr de MicrobeSoft ne les utilisent pas. Résultat: IM-POS-SI-BLE de redimensionner l'affichage.... Et avec des liens minuscules, bonjour l'effet "gros doigts" sur un tél mobile ou une tablette.

Donc, si avec ce que je vous ai donné comme exemples vous y arrivez pas, je sais plus quoi dire.

A+

Réponse 3 / 3

reedbedroom
4 déc. 2013 à 10:46

Bonjour a vous

Déjà merci pour vos réponses, par contre j'ai fais des essais mais je n'arrive toujours pas à charger le css de mon choix en fonction de l'orientation de la tablette.

Si je mets and (orientation : landscape) dans mon media ca ne fonctionne pas, si je le retires ca marche mais je n'ai aucune différence entre l'orientation portrait et l'orientation paysage :(

Merci.

mpmp93 Messages postés 6648 Date d'inscription mercredi 13 avril 2011 Statut Membre Dernière intervention 28 septembre 2015 1 339
4 déc. 2013 à 11:12

regardez MON CODE, aucun "orientation landscape" et ça marche et ça s'adapte tout seul!!!!

reedbedroom
4 déc. 2013 à 11:17

Non justement j'ai bien regardé ... aucun changement graphique. Bien entendu les colonnes s'adaptent mais dans le projet sur lequel je bosses, le graphisme change suivant l'orientation. Un peu plus compliqué quoi.

C'est bon j'ai réussi à faire la sélection en mettant seulement ceci dans mes META :


<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, user-scalable = yes">

Et ces sélections dans mon CSS :


@media only screen and (min-device-width: 1280px){}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape){}

@media only screen and (max-device-width: 768px) and (orientation: portrait){}

Après vidé le cash le changement de CSS s'effectue bien en fonction de l'orientation la tablette.

Merci de votre aide.

Discussions similaires

Chemin Logo du site de la Cité de l'espace

comment donner les droits sur fichier partage

"Reboot and Select proper Boot Device"