Appeler une feuille de style suivant l'orientation de l'écran
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:
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> |
