Charger differents fichiers css selon la taille de l'écran (mobile)
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:
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 !
