Bonjour
Mes connaissances en JS sont très limités. Comme le titre l'indique je voudrais appeler une feuille de style différente suivant que l'écran de la tablette ou du téléphone sont en mode portrait ou paysage.
J'ai essayer de compiler différents scripts trouvé sur le net, mais ça ne fonctionne pas.
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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72 <html><HEAD> <SCRIPT type="application/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"> var width = screen.width; var height = screen.height; /* Appelé quand le device passe en mode portrait. */ function mode_portrait() { $("head").append( $(document.createElement("link")).attr({rel:"stylesheet", type:"text/css", href:"Vstyles.css"}) ); } /* Appelé quand le device passe en mode paysage. */ function mode_paysage() { $("head").append( $(document.createElement("link")).attr({rel:"stylesheet", type:"text/css", href:"Hstyles.css"}) ); } window.onorientationchange = function() { var orientation = window.orientation; /* Trois cas de figure possible : * - le device a un écran plus large que haut. * - le device a un écran plus haut que large. * - le device trouve intelligent de modifier la largeur * et la hauteur de l'écran en fonction de son orientation... * * Du coup, soit la largeur/hauteur de l'écran change, et * on en déduit à partir de là l'orientation, sinon il faut * se fier à la variable window.orientation, et en déduire * d'après le ratio de l'écran l'orientation... */ if (screen.width != width || screen.height != height) { width = screen.width; height = screen.height; if (screen.width > screen.height) mode_paysage(); else mode_portrait(); } else if (screen.width > screen.height) { if (orientation == -90 || orientation == 90) mode_portrait(); else mode_paysage(); } else { if (orientation == 90 || orientation == -90) mode_paysage(); else mode_portrait(); } }</SCRIPT></HEAD> <body> <p> TEST mod </p> </body> </html>
Partager