Adapter page html à plusieurs device

**kodjoe** · 14/04/2013, 18h11

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 :

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
<!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

**Candygirl** · 15/04/2013, 10h43

Envoyé par kodjoe

Aurais-je oublié quelques chose ? :

Le sélecteur auquel tu désires appliquer ton css ^^ ?

Code :

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

1
2
3
img {
...
}

Un passage de ton css au validateur t'aurais indiqué qu'il y avait un problème dans ta déclaration.

Autrement, opter pour un doctype html 5 et utiliser un élément déprécié comme <center> est assez anachronique ;p