media handheld iphone

charlye · 31 Mars 2011

Bonjour tout le monde.
Je développe un site internet sur DW5.
Je voulais faire une version avec media="screen" avec une boite de 1024x768 et une version du même site pour Iphone avec media="handheld" et une boite de 480x320. Dans ce cas, je voulais faire 2 feuilles de styles.
Sauf que, j'ai lu sur internet que Safari ne supporte pas media="handheld" et ne prend donc pas en compte ma 2ème feuille de styles:heu:

Du coup je me tourne vers vous, quelqu'un a une solution pour contourner le problème, afin que Safari prenne en compte une autre CSS à l'ouverture du site sur Iphone?

Merci pour à tous pour votre aide et/ou vos astuces.

Nephou · 31 Mars 2011

Bonjour,
les media queries vont être tes meilleures amies.

Un lien ? bon allez, un lien

charlye · 31 Mars 2011

Donc si j'ai bien compris les infos que tu m'as données, je dois insérer ce code dans <head> avec un max de 380 (pour l'iphone) :

<link href="style1.css" media="screen" rel="stylesheet" type="text/css" />

<link href="style2.css"rel="stylesheet" media="screen and (max-width: 380px)" href="smallscreen.css" type="text/css" />

Merci pour ton aide

Nephou · 31 Mars 2011

De rien mais ce n’est pas tout à fait cela : il y a deux attributs href avec deux valeurs différentes dans la seconde balise style ; un reste de copier, coller j’imagine.

charlye · 4 Avril 2011

effectivement, une petite erreur de "copier/coller"
je vais essayer avec ça alors :
<link href="style1.css" media="screen" rel="stylesheet" type="text/css" />

<linkhref="style2.css" rel="stylesheet" media="screen and (max-width: 380px)" type="text/css"/>

---------- Nouveau message ajouté à 14h56 ---------- Le message précédent a été envoyé à 14h18 ----------

Re,
J'ai fait un test en modifiant la couleur de fond de la balise "body", et ça marche, j'ai bien une couleur différente sur l'écran de mon ordinateur et sur mon iphone.

Par contre, lorsque je créé une div container avec des valeurs de boite différentes en fonction des CSS, au niveau de l'écran de l'ordi tout est ok, par contre au niveau de l'iphone, ma div est positionnée tout en haut à gauche, comme si l'iphone ne "zoome" pas.
Merci de ton aide

Voici le code source :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>

<link href="style1.css" media="screen" rel="stylesheet" type="text/css" />
<link href="style2.css" media="screen and(max-width:320px)" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="container">
</div>
</body>
</html>

style1.css :

@charset "utf-8";
body {
background-color: #FF0;
height: 760px;
width: 1024px;
}

#container {
background-color: #F00;
height: 760px;
width: 1024px;
}

style2.css :

@charset "utf-8";
body {
height: 480px;
width: 320px;
background-color: #03F;
}
#container {
height: 480px;
width: 320px;
background-color: #90C;
}

Anonyme · 4 Avril 2011

Encore un lien pour bien comprendre le concept. Perso, sur mon site j'ai tout regroupé dans un seul fichier css.

Edit: Déjà définir une hauteur sur le body ça me semble bizarre…

Nephou · 4 Avril 2011

Nephou a dit:
Un lien ? bon allez, un lien

gloup gloup a dit:
Encore un lien pour bien comprendre le concept. Perso, sur mon site j'ai tout regroupé dans un seul fichier css.

Dites-donc vous

---------- Nouveau message ajouté à 15h19 ---------- Le message précédent a été envoyé à 15h13 ----------

charlye a dit:
Par contre, lorsque je créé une div container avec des valeurs de boite différentes en fonction des CSS, au niveau de l'écran de l'ordi tout est ok, par contre au niveau de l'iphone, ma div est positionnée tout en haut à gauche, comme si l'iphone ne "zoome" pas.

essaye un petit <meta name="viewport" content="width=device-width" /> dans len-tête de ta page pour voir

Anonyme · 4 Avril 2011

:siffle:

charlye · 4 Avril 2011

Trop fort, ça marche avec la balise meta!!!

J'ai renseigné la taille de la boite sur la balise body pour essayer de "forcer" la taille de celle-ci.
En tout cas un grand merci à tous les 2

media handheld iphone

charlye

Membre enregistré

Nephou

de pas sage

charlye

Membre enregistré

Nephou

de pas sage

charlye

Membre enregistré

Anonyme

Invité

Nephou

de pas sage

Anonyme

Invité

charlye

Membre enregistré

Sujets similaires