Adapter page html à plusieurs device
Bonjour à tous
J'ai une page html avec une image de 1448 (H) x 2048 (L) et j'aimerai l'adapter aux différents écrans d'appareils Apple
320 (H) x480 (L) / 640 (H) x960 (L) / 640 (H) x1136 (L) / 768 (H) x1024 (L) / 1536 (H) x2048 (L)
Ce code n'apporte aucun changement à ma page lorsque je la visualise sur Iphone par exemple. Aurais-je oublié quelques chose ? :
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
| <!DOCTYPE HTML><head>
<title>Redoutable Tentation</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 480px) and (orientation: landscape){
border:0;
height:100%
}
/* #### Mobile Iphone retina 3.5 Landscape #### */
@media screen and (max-device-width: 960px) and (orientation: landscape){
border:0;
height:100%
}
/* #### Mobile Iphone retina 4 Landscape #### */
@media screen and (max-device-width: 1136px) and (orientation: landscape){
border:0;
height:100%
}
/* ####Tablet Landscape #### */
@media screen and (max-device-width: 1024px) and (orientation: landscape){
border:0;
width:100%
}
/* ####Tablet Retina Landscape #### */
@media screen and (min-device-width: 2048px) and (orientation: landscape){
border:0;
width:100%
}
</style></head>
<body style="background-color: white; margin:0; padding:0;">
<center><img src="0.jpg" oncontextmenu = "return false" ondrag = "return false" onmousedown="return false" title="img" alt="img" ></center>
</body></html> |
Merci
