1478 sujets

Web Mobile et responsive web design

[Réglé] Problème d'interpretation entre screen et handled

Bonjour,

J'ai voulu essayé de faire une version mobile alternative sur une intégration mais le problème c'est qu'Opera mini lis la feuille de style pour mobile mais aussi pour écran, et cela me pose beaucoup de problème.
Comment faire pour qu'il lise uniquement la feuille de style pour mobile, ou les deux mais que la priorité soit donné à celle pour mobile, par exemple :

Si il y a un margin :auto sur la feuille de style en media "screen" et un margin: left sur la feuille en media "handled", le navigateurs mobile lira les deux mais mettra la priorité sur la feuille de style pour mobile et appliquera donc le margin: left

Merci.
Modifié par Chok71 (14 Sep 2010 - 19:48)
Salut,

Depuis la version 4, Opera Mini ne comprend plus le média handheld. En revanche, non seulement il prend en charge le média screen, mais il reconnaît les media queries. Soit dit en passant, il en est de même avec Opera Mobile depuis sa version 9.

Quant aux feuilles de styles à servir, je procéderais comme suit :
* une feuille de style commune à tous les écrans, y compris mobiles,
* une feuille de style pour les mobiles comportant les correctifs nécessaires.

Ce qui donne le bout de code suivant :
<link rel="stylesheet" type="text/css" href="ecran.css" media="screen, handheld" />
<link rel="stylesheet" type="text/css" href="mobile.css" media="handheld, only screen and (max-device-width: 640px)" />
Est ce qu'il est possible de faire une feuille de style uniquement pour Mobile pour bien la différencier de celles en mode "screen" ?

Pour moi le fait qu'il reconnaisse les deux m'empêche de bien travailler.

Merci.
Pourquoi? Tu fais ton site normalement pour un usage "ordinateur" et puis pour la version mobile tu mets tout à la suite (pas de colonnes) et tu enlève ce qui n'est pas nécessaire.

Tu peux aller voir sur mon site (design en cours). Perso j'utilise une feuille de style "media all" (1 connexion http c'est bien pour les performances), avec à l'intérieur les ajustements pour les médias print et media queries. J'ai pas encore ajouter le media "handheld".
Modifié par Patidou (02 Sep 2010 - 15:50)
Bonsoir,

Tu peux aussi cibler les médias selon la taille, iPad, iPhone, etc.. Et tout regrouper dans la même feuille de style.

@media screen and (max-width:312px)
{
    .box {
        background:url(img.png);
        }
}

@media screen and (min-width:313px) and (max-width:605px)
{
    .box {
        background:url(img.png);
        }
}

@media screen and (min-width:606px)
{
    .box {
        background:url(img.png);
        }
}


Edit : Ouai bref, du cout je ne fais que répéter ce que dit Patidou Smiley confus
Modifié par 3arly3F (14 Sep 2010 - 02:07)
Voici une capture du problème que j'ai : http://yfrog.com/mrpressepapiers1j

Voici mon code :

<head>
[...]
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<link rel="stylesheet" href="css/style-mobile.css" media="handheld, only screen and (max-device-width:480px)" /> <![endif]-->
</head>


Le code pour la feuille pour écran :
body {
width: 788px;
margin: auto;
background-color: #fff;
}


Et pour les écrans de mobiles :
body {
width: 470px;
margin: auto;
background-color: #fff;
}


L'intégration du site pour tout voir : http://www.chokri-rafik.com/realisations/inte_acneproduct/index.html

Je comprend pas pourquoi il y a un gros espace vide à droite et à gauche.
Ajoute l'élément meta suivant :
<meta name="viewport" content="width=device-width" />

Cela permettra d'éviter quelques soucis liés au viewport, dont les valeurs par défaut varient selon les plateformes et navigateurs mobiles et peuvent sembler arbitraires.

Quant à la feuille de style pour mobile, au niveau de body, j'éviterais les marges automatiques et fixerais la largeur à 100 % ou à auto (à moins qu'il n'y ait une contrainte d'ordre graphique qui oblige à une largeur de 470 pixels).
Merci pour l'info, ça s'affiche mieux maintenant. Smiley smile

"Victor" a écrit :
Quant à la feuille de style pour mobile, au niveau de body, j'éviterais les marges automatiques et fixerais la largeur à 100 % ou à auto (à moins qu'il n'y ait une contrainte d'ordre graphique qui oblige à une largeur de 470 pixels).

Il faudrait donc que le site soit extensible horizontalement ?
Chok71 a écrit :
Il faudrait donc que le site soit extensible horizontalement ?

Disons qu'un site tenant dans 470 pixels de largeur risque d'être un peu rikiki sur un iPhone 4, dont la largeur d'écran est de 640 pixels.
Sur mon iPhone, j'ai exactement la même chose que dans Opera Mini. Smiley smile

C'est bien l'émulateur d'Apple que tu utilises?
iPhone 3G iOS4.1 (safari mobile), Opera Mini sur iPhone, Opera Mobile sur Mac, Firefox Mobile sur Mac. Smiley cligne
Modifié par Patidou (09 Oct 2010 - 10:58)
Si tu as un mac, il y a l'émulateur d'Apple mais il faut payer pour s'inscrire comme dev iPhone.
Modifié par Patidou (09 Oct 2010 - 10:53)
Bonjour,

Je cherche qq'un sur Paris pour développer un jeu assez simple en 2d, sur Iphone.

Rémunération attractive.

Merci de me contacter si intéressé : édité : voir la section Emploi pour ce genre de choses

kiouppy
Modifié par Raphael (12 Oct 2010 - 18:29)
Sujet clos
Aller à