Sujets similaires

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

Bonjour Kodjoe,

En fait le code est faux (d'une part) et, même s'il fonctionnait, aurait très peu d'intérêt (j'avoue que je suis perplexe... tu applique des propriétés sur... rien ?).

Bon, tout simplement pour commencer, il faut que tu déclare du CSS dans tes media queries.

Ceci ne fait rien :

Code:: /* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 480px) and (orientation: landscape){
border:0;
height:100%
}

Ceci en revanche, changera une propriété sous certaines conditions (celles de la media query) :

Code:: /* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 480px) and (orientation: landscape){
img {
border:0;
height:100%;
}
}

Bon après dans le tas il y a aussi :

Le problème de la spécificité, si tu déclare des propriétés en dur dans ton HTML avec style="...", elles seront prioritaires sur le CSS
Le fait de définir la même propriété pour 5 media queries différentes n'est pas super optimal (en gros, tu pourrais en avoir qu'une seule dans ton cas)
Attention aux espaces qui trainent dans ton HTML + ; manquant dans ton CSS
<center> est une balise obsolète en HTML5, attention aussi

Je pense avoir fait rapidement le tour Bravo !

Un énorme merci pour ta réponse Wink

donc :

- Comment remplacer la balise center par du code dans mon cas ?
- Si je comprends bien ce que tu dis je dois me retrouver avec un code comme celui là :

Code:: <!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 only screen and (min-device-width: 480px) and (max-width : 1136px) and (orientation:landscape) {
img {
border:0;
height:100%;
}
}
@media only screen and (min-device-width: 1024px) and (max-width : 2048px) and (orientation:landscape) {
img {
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>

Bonsoir !

Ce problème est-il toujours d'actualité ? Merci de donner une réponse dans un délai de quatre jours sans quoi le sujet sera archivé.

Bonne soirée ! Adapter page html à plusieurs device 926145

Adapter page html à plusieurs device 926145

Bonjour,

Nous n'avons toujours pas de nouvelles. Je déplace le sujet !

Adapter page html à plusieurs device

Adapter page html à plusieurs device

Sujets similaires

Sujets similaires

Partenaires Or