Suivez les fils RSS
 
Rechercher dans le sujet :
Forum
» Web Mobile et responsive web design
» [Réglé] Problème d'interpretation entre screen et handled
Auteur
Chok71
# 01 Sep 2010 - 13:23:43
Citer
285 Posts
 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)
^
Victor BRITO
# 01 Sep 2010 - 15:34:35
Citer
Je ne suis pas mort, je dors
2214 Posts
 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)" />

En campagne contre la balkanisation du Web, pour rappeler qu'il existe un seul Web
Mon avatar : l'ancien département de la Seine (le grand 75 d'avant 1968)
http://www.victor-brito.fr 
^
Chok71
# 02 Sep 2010 - 14:11:16
Citer
285 Posts
 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.
^
Patidou
# 02 Sep 2010 - 15:49:04
Citer
2173 Posts
 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)
Avertissement : il est inutile de m'envoyer des mp pour demander de répondre à vos sujets sur le forum. Je répond si j'ai un élément de réponse et si j'ai le temps. Merci d'avance.
http://www.lombre.net/ 
^
3arly3F
# 14 Sep 2010 - 02:02:32
Citer
128 Posts
 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 confus
Modifié par 3arly3F (14 Sep 2010 - 02:07)
^
Chok71
# 14 Sep 2010 - 15:33:57
Citer
285 Posts
 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.
^
Victor BRITO
# 14 Sep 2010 - 15:46:45
Citer
Je ne suis pas mort, je dors
2214 Posts
 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).
En campagne contre la balkanisation du Web, pour rappeler qu'il existe un seul Web
Mon avatar : l'ancien département de la Seine (le grand 75 d'avant 1968)
http://www.victor-brito.fr 
^
Chok71
# 14 Sep 2010 - 19:10:40
Citer
285 Posts
 Merci pour l'info, ça s'affiche mieux maintenant. 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 ?
^
Victor BRITO
# 14 Sep 2010 - 19:24:33
Citer
Je ne suis pas mort, je dors
2214 Posts
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.
En campagne contre la balkanisation du Web, pour rappeler qu'il existe un seul Web
Mon avatar : l'ancien département de la Seine (le grand 75 d'avant 1968)
http://www.victor-brito.fr 
^
Chok71
# 14 Sep 2010 - 19:48:04
Citer
285 Posts
 Ok, merci. cligne

^
Chok71
# 06 Oct 2010 - 17:26:08
Citer
285 Posts
 Bonjour,

Je voudrais savoir pourquoi mon intégration pour mobile ne passe pas avec l'iPhone : http://www.chokri-rafik.com/realisations/inte_acneproduct/index.html

J'ai essayé avec l'émulateur iPhone et iPad, iBBDemo2, et la feuille de style pour mobile n'est pas reconnue, alors qu'avec OperaMini ça marche.
^
Patidou
# 06 Oct 2010 - 19:27:31
Citer
2173 Posts
 Sur mon iPhone, j'ai exactement la même chose que dans Opera Mini. smile

C'est bien l'émulateur d'Apple que tu utilises?
Avertissement : il est inutile de m'envoyer des mp pour demander de répondre à vos sujets sur le forum. Je répond si j'ai un élément de réponse et si j'ai le temps. Merci d'avance.
http://www.lombre.net/ 
^
Chok71
# 08 Oct 2010 - 20:29:42
Citer
285 Posts
 Bizarre, moi ça me donne ça avec iBBDemo2 :

http://yfrog.com/7epressepapiers1j

^
Patidou
# 08 Oct 2010 - 22:53:57
Citer
2173 Posts
 upload/4635-photo.PNG

Moi j'ai ça, faut pas faire confiance aux émulateurs de tierce partie. smile
Avertissement : il est inutile de m'envoyer des mp pour demander de répondre à vos sujets sur le forum. Je répond si j'ai un élément de réponse et si j'ai le temps. Merci d'avance.
http://www.lombre.net/ 
^
Chok71
# 09 Oct 2010 - 01:05:54
Citer
285 Posts
 Je pourrais savoir tu utilise quoi pour tester ?
^
Patidou
# 09 Oct 2010 - 10:52:01
Citer
2173 Posts
 iPhone 3G iOS4.1 (safari mobile), Opera Mini sur iPhone, Opera Mobile sur Mac, Firefox Mobile sur Mac. cligne
Modifié par Patidou (09 Oct 2010 - 10:58)
Avertissement : il est inutile de m'envoyer des mp pour demander de répondre à vos sujets sur le forum. Je répond si j'ai un élément de réponse et si j'ai le temps. Merci d'avance.
http://www.lombre.net/ 
^
Patidou
# 09 Oct 2010 - 10:53:40
Citer
2173 Posts
 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)
Avertissement : il est inutile de m'envoyer des mp pour demander de répondre à vos sujets sur le forum. Je répond si j'ai un élément de réponse et si j'ai le temps. Merci d'avance.
http://www.lombre.net/ 
^
Chok71
# 09 Oct 2010 - 23:51:52
Citer
285 Posts
 Ok, merci. cligne

^
kiouppy
# 12 Oct 2010 - 16:04:54
Citer
1 Posts
 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)
^
Le sujet est clos.
Aller à