Créer version mobile du site.

11 réponses
AuteurMessage

Eza |
Membre

 

Inscrit le : 28/02/2008

# Le 19/05/2010 à 20:29

Bonjour,

Depuis quelques jours je me penche sur la question pour adapter "facilement" un site web pour mobile.

Après plusieurs lectures j'ai vu qu'on pouvait simplement crée des feuilles de styles différents. Pour spécifier qu'il existe une feuille de style pour mobile. Cependant après avoir été avec un Samsung S5230 sur ma page de test je remarque que la propriété "handheld" est purement ignorée par ce dernier...

Je pensait avec un simple :
<link rel="stylesheet" type="text/css" href="css/mobile.css" media="handheld,all" />
<link rel="stylesheet" type="text/css" href="css/screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
Pouvoir adapter mon travail facilement, mais ça ne semble pas être le cas...

Avez-vous déjà dev des sites pour mobiles, avez-vous des pistes que je pourrai explorer?

Je vous remercie d'avance,
Ludovic

Ludovic
MyPixhell.comOuvrir dans une nouvelle fenetre | Web-Creator.beOuvrir dans une nouvelle fenetre | Cv en ligneOuvrir dans une nouvelle fenetre

cerise | Gaël
Modérateur

Photo de cerise

Inscrit le : 31/10/2008

# Le 19/05/2010 à 20:36

tu peux tester le navigateur et afficher la feuille de style adéquate en fonction

Eza | Ludovic
Membre

 

Inscrit le : 28/02/2008

# Le 19/05/2010 à 21:11

Merci pour ta réponse,

Après avoir cherché j'ai vu une page sur la quel on peux voir les propriétés supportées par le navigateur (http://www.alsacreations.com/static/csstester/Ouvrir dans une nouvelle fenetre )

Et j'ai donc adapté mon code par celui-ci:

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

C'est le "only screen and (max-device-width: 480px)" qui est intéressant...
Si ça peut aider une personne

Ludovic
MyPixhell.comOuvrir dans une nouvelle fenetre | Web-Creator.beOuvrir dans une nouvelle fenetre | Cv en ligneOuvrir dans une nouvelle fenetre

ddpetit | Damien
Modérateur

Photo de ddpetit

Inscrit le : 03/05/2006

# Le 19/05/2010 à 21:33

Merci Ludo !

Loccasion.com - Vente de voitures d'occasionOuvrir dans une nouvelle fenetre - Mandataire AutoOuvrir dans une nouvelle fenetre

cerise | Gaël
Modérateur

Photo de cerise

Inscrit le : 31/10/2008

# Le 19/05/2010 à 21:46



sur la version iphone on utilise ça :

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

et sur la version mobile :

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



ddpetit | Damien
Modérateur

Photo de ddpetit

Inscrit le : 03/05/2006

# Le 19/05/2010 à 21:52

Cerise : peux-tu nous expliquer à quoi sert le viewport ? Si je comprends bien tu as une version iphone et une version mobile ? Qu'est-ce qui diffère entre les deux ?

Loccasion.com - Vente de voitures d'occasionOuvrir dans une nouvelle fenetre - Mandataire AutoOuvrir dans une nouvelle fenetre

cerise | Gaël
Modérateur

Photo de cerise

Inscrit le : 31/10/2008

# Le 20/05/2010 à 09:56

ddpetit a dit :
Cerise : peux-tu nous expliquer à quoi sert le viewport ? Si je comprends bien tu as une version iphone et une version mobile ? Qu'est-ce qui diffère entre les deux ?



c'est pas du tout les mêmes sites. la version iphone est destinée à être visualisée sur safari mobile (et fonctionne d'ailleurs parfaitement pour test sur safari version ordinateur) et fait appel à des propriétés propriétaires qui fonctionneront sur aucun autre navigateur (désolé pagetronic). facile à faire, tu as juste à déployer certaines librairies avec le SDK, les feuilles de styles, graphismes, fonctions de recherches sont déjà intégrées

La version mobile est par contre une version très allégée de notre site initialement conçue dans un but très précis, nos membres avaient besoin de pouvoir consulter les offres remboursées des supermarchés en faisant leur courses, ce qui est prtaique.

Maintenant, il faut dire que la consultation du site sur mobile se fait principalement sur iphone

http://iphone.ceriseclub.comOuvrir dans une nouvelle fenetre

http://mobile.ceriseclub.comOuvrir dans une nouvelle fenetre

cerise | Gaël
Modérateur

Photo de cerise

Inscrit le : 31/10/2008

# Le 20/05/2010 à 10:22

c'est pas une erreur, c'est un choix, ma solution a pris à peine 30 minutes à mettre en place et reste très basique, légère, et fonctionnelle sous l'iphone (ce pour quoi elle était prévue), car quand on l'a faite, à part l'iphone, et les mobiles wap, Android était même pas encore sorti et le nexus One inexistant.
Par ailleurs, je doute fort que les utilisateurs de blackberry s'intéressent à notre contenu, c'est pas vraiment notre cible...

mais il est prévu de faire une version mobile plus complète avec d'autres contenu d'ici fin 2010

cerise | Gaël
Modérateur

Photo de cerise

Inscrit le : 31/10/2008

# Le 20/05/2010 à 10:25

tiens sinon pagetronic, la librairie JS utilisée sur notre version iphone est basée sur celle-ci : http://code.google.com/p/iui/Ouvrir dans une nouvelle fenetre

après, c'est qu'une question de skin

cerise | Gaël
Modérateur

Photo de cerise

Inscrit le : 31/10/2008

# Le 20/05/2010 à 10:25

pagetronic a dit :
En mettant de coté mon animosité envers l'Iphone (je répète j'en ai eu 2 ), le navigateur d'Android est largement plus adapté aux sites en taille classique, je pense pas qu'il faille une version mobile pour Android, ca marche très bien sans.



+1

Eza | Ludovic
Membre

 

Inscrit le : 28/02/2008

# Le 20/05/2010 à 15:37

Moi pour avoir testé la page test sur iPhone, Htc Hero, Samsung s5230. Je peux dire qu'avoir une version mobile c'est quand même sympa, après les nouveaux gsm auront des résolutions plus grande et ne justifieront pas l'utilisation d'une feuille de style pour eux. Mais autant être adaptable un maximum (quitte à proposer un lien pour faire passer la version mobile à la version classique et vice versa...

Ludovic

Ludovic
MyPixhell.comOuvrir dans une nouvelle fenetre | Web-Creator.beOuvrir dans une nouvelle fenetre | Cv en ligneOuvrir dans une nouvelle fenetre

Eza | Ludovic
Membre

 

Inscrit le : 28/02/2008

# Le 26/05/2010 à 16:23

Juste pour donner un retour...

J'ai eu la mauvaise blague lors d'une mise en ligne et en testant sur un mobile de voir que le mobile en question prenait les 2 feuilles de style donnant un résultat asse horrible...

Voici la solution que j'ai trouvé si ça peux aider une personne à ne pas se prendre la tête...

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<!--[if IE]><link rel="stylesheet" type="text/css" href="/Content/css/styles.css" media="screen" /><![endif]-->
<link rel="stylesheet" type="text/css" href="/Content/css/styles.css" media="only screen and (min-device-width: 800px)" />
<link rel="stylesheet" type="text/css" href="/Content/css/mobile.css" media="handheld, only screen and (max-device-width: 480px)" />

Explication: meta viewport pour avoir sur l'iphone directement en full screen (qu'il réagisse comme tous les autres smartphone). La condition pour les styles car IE est comme toujours à la traine ... min-device pour la version "pc" et le handheld et max device pour les smartphones.

Testé cette solution sur IE6, 7, 8, Opera, Chrome, Safari, Firefox.

(Message édité le 27-05-2010 à 08h34 par Eza)

Ludovic
MyPixhell.comOuvrir dans une nouvelle fenetre | Web-Creator.beOuvrir dans une nouvelle fenetre | Cv en ligneOuvrir dans une nouvelle fenetre

Répondre

Vous ne pouvez pas participer au forum, car votre inscription n'a pas été validée. Pour vous faire valider en tant que Membre, cliquez ici.

© MHN - Tous droits réservés | CNIL N°844440 | 23/11/2024 22:47:29 | Généré en 8.42ms | Contacts | Mentions légales |