1415 sujets

Web Mobile et responsive web design

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)
Salut Arsene,
je connais déja l'article de ton deuxième liens, je crois que je vais me pencher sur les specs. Ah la la c'était trop beau Smiley cligne
Merci à toi.
Modifié par Hermann (22 Jul 2007 - 14:05)
Modérateur
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 Smiley rolleyes :
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)