28172 sujets

CSS et mise en forme, CSS3

Media Queries

Bonjour à tous,

J'ai un petit soucis avec les media queries. En effet, je souhaiterai changer la mise en forme de mon site en fonction de la largeur de l'écran sur lequel il est affiché. J'ai un fichier CSS "style.css" à la racine de mon site et mes media queries sont à l'intérieur de celui-ci, tout en bas, encadré par ce qui suit :


html,
body {
    margin: 0px;
    padding: 0px;
    padding: 5px;
    background: #F6F4F1;
    color: #5B6268;
    font-family: trebuchet MS, helvetica, arial, sans-serif;
    font-size: 0.9em;
}
div#global {
    width: 1004px;
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    html,
    body,
    div#global {
        width: 440px;
    }
}


J'avais mis au tout début : @media only screen and (max-width: 480px) ce qui me permettais de visualiser en direct mes changements en redimensionnant la fenêtre de mon navigateur, mais ça ne marchait pas sur iphone. Avec les "device-width" plus aucun changement ne se produit dans mon navigateur mais mon media queries est en partie chargé sur mon périphérique.

Mon problème est qu'on dirait que le CSS ne charge pas entièrement. Certaines parties fonctionnent tandis que d'autre, comme la largeur de mon document ne se changent pas. Par exemple, mon site qui normalement tient 1024px de large devrait tenir 440px sur un petit écran. Le site fait en général bien 440px sur iphone, mais on dirait que l'écran de l'iphone le présente en 1024px, donc le site est "tassé" à gauche et tient un petit peu moins que la moitié de l'écran de l'iphone.

Pourriez-vous m'aider ? D'avance merci.
Salut,

As-tu pensé à insérer une méta viewport dans le code HTML ?
Modifié par Victor BRITO (14 Nov 2011 - 16:08)
Bonjour Victor et merci de ta réponse !

Par l'ajout d'une méta viewport, il faudrait donc que j’insère dans mon code :

<meta name="Viewport" content="width=440">

si tant est que mes media queries soient actives à partir de 440px de large ?
Très bien c'est noté. Je pense donc prendre :

<meta name="Viewport" content="width=device-width">

Dois-je la cumuler avec d'autres ? ou le navigateur n'en tolère peut-être qu'une ?
Mieux vaut ne déclarer qu'une seule méta viewport ; en revanche, dans l'attribut content, tu peux insérer plusieurs paramètres à la suite (width, initial-scale, maximum-scale, user-scalable), séparés par une virgule.
Super, tout marche correctement avec <meta name="Viewport" content="width=device-width">. Un grand merci Victor !

Bonne journée à toutes et à tous.
Sujet clos
Aller à