Charger differents fichiers css selon la taille de l'écran (mobile)

**vXTikadXv** · 09/12/2018, 15h24

Bonjour, je rencontre un problème sur un petit bout de code Jquery qui est censé charger tel ou tel fichier css selon la taille de l'écran. Sous Firefox sur mon pc, j'active la vue adaptative pour développer l'affichage mobile, qui fonctionne à merveille.
Cependant, lorsque j'essaye sur un vrai smartphone aucune de mes conditions n'est prise en compte...

Voici le code en question:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
var windowHeight = window.innerHeight || $(window).height();
var windowWidth = window.innerWidth || $(window).width();
 
if(windowWidth == 1024 || windowWidth == 768) {
        $("#css-files").attr("href", "public/css/ipad.css");
        console.log(windowWidth + " ipad");
    } else if ((windowWidth == 812 && windowHeight == 375) || (windowWidth == 375 && windowHeight == 812)) {
        $("#css-files").attr("href", "public/css/iphoneX.css");
        console.log(windowWidth + " X");
    } else if (windowWidth == 736 || windowWidth == 414) {
        $("#css-files").attr("href", "public/css/iphonePlus.css");
        console.log(windowWidth + " plus");
    } else if ((windowWidth == 667 && windowHeight == 375) || (windowWidth == 375 && windowHeight == 667)) {
        $("#css-files").attr("href", "public/css/iphone.css");
        console.log(windowWidth + " iphone");
    } else if (windowWidth < 414) {
        $("#css-files").attr("href", "public/css/others.css");
        console.log(windowWidth + " other");
    } else if(windowWidth > 1024) {
        $("#css-files").attr("href", "public/css/style.css");
    }

Je sèche complètement, je vous remercie d'avance de toutes aides que vous pourrez m'apporter !

**SpaceFrog** · 10/12/2018, 09h45

Regard plutot du coté de media queries ?

Invité · 10/12/2018, 12h50

Bonjour,

charger les fichiers CSS via JavaScript n'a aucun sens.

Une solution (exemple) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<head>
<!-- ... -->
<!-- Media Queries -->
	<link type="text/css" rel="stylesheet" href="<?php echo PATH_TPL_CSS; ?>css-phone.css" media="screen and (max-width:640px)" />
	<link type="text/css" rel="stylesheet" href="<?php echo PATH_TPL_CSS; ?>css-tablet.css" media="screen and (min-width:641px) and (max-width:1024px)" />
	<link type="text/css" rel="stylesheet" href="<?php echo PATH_TPL_CSS; ?>css-desktop.css" media="screen and (min-width:1025px)" />
<!-- ... -->
</head>

Charger differents fichiers css selon la taille de l'écran (mobile)

jQuery

Discussions similaires

Partager

Partager