[Résolu] Cibler l'Iphone via les média queries

Bonjour,
dans la définission du média CSS, j'ai ajouté une condition (via les media queries) qui devrait permettre de ne cibler que les écrans ayant un résolution maximale de 480px de large, c-a-d le mode paysage de l'Iphone, or le mot screen du media querie est visiblement pris en compte indépendamment de ce qui suit par Firefox et Opera:

<link rel="stylesheet"  type="text/css" href="css/mobile.css"
 media="screen and (max-device-width: 480px)" />

Ou alors j'ai pas bien compris comment tout ça fonctionne.
C'est par ici
Modifié par Hermann (21 Nov 2007 - 16:50)

Ah ben je comprends pas encore grand'chose non plus Peut-être tester des conditions type "not" ou "only" : media queries (premier tiers de la page)

et ça (en anglais) Media Queries and Handheld stylesheets
Modifié par Arsene (22 Jul 2007 - 13:38)

Salut,

Je suppose que ta css pour mobile utilise des propriétés différentes sur certains de tes éléments par rapport à la css première donc pourquoi passer par max-device-width au lieu d'une propriété... plus habituelle ?

De mon côté, je m'en suis servi ainsi et ça marche bien :

xhtml

<style type="text/css"><!--
    @import url(style.css);
    @import url(mobile.css);
--></style>

style.css

@media screen, projection
{
    div { background-color: red; width: 100px; height: 100px; }
}

mobile.css

@media screen and (background-color: red)
{
    div { background-color: green; }
}

koala64 a écrit :
Salut,

Je suppose que ta css pour mobile utilise des propriétés différentes sur certains de tes éléments par rapport à la css première donc pourquoi passer par max-device-width au lieu d'une propriété... plus habituelle ?

Salut Koala,

En faisant ça, je cible l'Iphone qui n'implémente pas handheld mais les media queries. Ceci dit si ça fonctionne via @media que je n'ai pas testé et bien tant mieux.

je viens de trouver une solution qui a l'air de fonctionner:

media="handheld, only screen and (max-device-width:480px)"

C'est celle que préconise Apple mais j'y ai ajouté handheld.

Mais dans les specs on lit ceci :

a écrit :
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

Modifié par Hermann (21 Nov 2007 - 16:09)