Alsacreations.fr en version mobile

(reprise du message précédent)

Patidou a écrit :
Pour iPhone 4, apple a sorti un media queries "propriétaire":

Ah oui c'est pasidiot, mais ça devient vraiment trop spécifique.

Sur mon site de test, j'ai fait ça :

@media only screen and (max-device-width:480px), only screen and (-webkit-min-device-pixel-ratio: 2) {…}

Ça fonctionne sur iPhone <4, pour le 4 théoriquement ça devrait marcher (pas testé, pas envie d'acheter le kit de dev).

Il y a peut-être moyen d'affiner le truc en donnant en plus la largeur maximale pour la deuxième condition mais bon…
Modifié par Patidou (16 Jul 2010 - 06:51)

Bon j'ai trouvé ce qui me posait problème depuis le début : un attribut cols="40" dans un textarea !
Du coup, quelle que soit la largeur fluide que j'essaye de lui donner, le cols est prioritaire et pousse tout le site.

Tout devrait bien mieux s'afficher à présent.

Un lien menant vers le site version mobile doit être mis en place sur le site "desktop" et un lien vers le site "desktop" doit apparaitre sur le site version mobile, tout simplement parce-que des mauvaises redirections peuvent exister dans les deux sens et qu'il faut permettre à l'utilisateur de switcher entre les deux

Pour ma part j'ai fais le tour de toutes les pages sur mon iPod touch, en portrait et en paysage, et je ne trouve rien à redire sur l'affichage!

Il n'y a pas de redirection, c'est le même site qui s'adapte à l'écran grâce aux media queries…

Hello,

ClementRoy a écrit :

Pour ma part j'ai fais le tour de toutes les pages sur mon iPod touch, en portrait et en paysage, et je ne trouve rien à redire sur l'affichage!

Merci pour ce retour concluant

Pour ce qui est de la redirection, je confirme ce que vient d'écrire Patidou : il n'y en a pas. C'est juste un affichage différent du même site.

Autant pour moi.

Hello, désolé pour le retard, j'arrive un peu quand tout est fini mais bon, j'avais fais les screen mais j'avais oublié de les poster ! Alors voila :

1
2
3
4
5
6

Donc, si ça peu aider

bioslord a écrit :
Donc, si ça peu aider

Merci beaucoup.
Oui ça m'aide dans la mesure où ça me conforte dans mes choix techniques : ça a l'air de bien fonctionner

Je viens de voir le sujet, avec des analyses intéressantes sur le sujet.

Est ce que c'est intéressant d'avoir une analyse du site sur HTC HD avec Windows Mobile 6.1 ?

Cocci_uk a écrit :
Est ce que c'est intéressant d'avoir une analyse du site sur HTC HD avec Windows Mobile 6.1 ?

Euh... comment dire... ouais pourquoi pas, pour le fun

Des que je trouve comment faire des screenshot j'envoie ca

Salut,

Testé à l'instant avec mon iPhone 4 sous Safari, ça a l'air de fonctionner correctement.

Sous Opera Mini, en revanche, mauvais point en ce qui concerne les images, notamment le bouton de validation de formulaire qui n'apparait pas.

Bonjour,

Sujet très intéressant, je cherchais justement comment faire pour développer une version spécifique au téléphone type mobile classic, iphone android, etc...

Si je comprends bien :
- soit on crée deux versions distinct on appelant l'une ou l'autre au travers de JS certainement (corriger moi si je me trompe) ou
- On crée un seul site avec plusieurs mise en page différente?

pika28 a écrit :

- soit on crée deux versions distinct on appelant l'une ou l'autre au travers de JS certainement (corriger moi si je me trompe)

Pas des JS, des media queries…

pika28 a écrit :
- On crée un seul site avec plusieurs mise en page différente?

On peut créer deux versions d'un même site (exemple : Maître Eolas et sa version mobile), effectivement, mais si c'est possible c'est mieux les media queries.
Modifié par Patidou (12 Nov 2010 - 18:36)

@Patidou : Tu me conseilles donc de me renseigner sur les médias queries. Peut-on avec ceci, diriger vers deux versions de sites, ou seulement diriger vers deux versions de JS?

Bonjour à tous,

pika28 a écrit :
@Patidou : Tu me conseilles donc de me renseigner sur les médias queries. Peut-on avec ceci, diriger vers deux versions de sites, ou seulement diriger vers deux versions de JS?

En fait les media queries sont un mécanisme css permettant d'appliquer des styles sous certaines conditions. On peut décider d'appliquer un autre style si par exemple la taille de l'écran fait moins de X pixels, où X est en général un peu plus que la taille de l'écran d'un mobile.

Cela donne par exemple un css de la forme:

/*
Code css usuel: html, body, etc.
*/
@media only screen and (max-device-width:640px), only screen and (max-width:640px)  {
/*
Code css supplémentaire pour portable
*/
}

Le css ajouté en fin de page remplacera ce qui aura été défini au dessus.

Sinon pour la page d'accueil, j'ai des choses bizarres de mon côté. J'ai testé avec un GalaxyS, et avec Safari pour Mac (Webkit, version de développement r71806), et j'obtiens la même chose.
Le box-ordinal-group fait des choses bizarres; j'obtiens une hauteur du apropos_home de 1659px. Cela se remet si je désactive et réactive la propriété display: -webkit-box.
Note: Sur mon mobile cela ne se passe que si je passe en paysage (le site ne revient pas dans un bon état si je repasse en portrait).
Modifié par Jvtanguy (12 Nov 2010 - 22:41)

Raphael a écrit :

3) Affichage d'un message personnalisé en préambule (&quot;Version mobile du site web de l'agence&quot;)

Je ne le vois pas, normal? Comment as tu réalisé ce message?

Raphael a écrit :

5) Redimensionnement des éléments : passer toutes les largeurs fixes en largeurs fluides, appliquer des max-width 100% à tous les éléments &quot;risqués&quot; (img, table, object,...) et un word-wrap: break-word pour éviter les débordements (code source par ex)

Tu as passé les width en auto, c'est pareil que 100%?

Le 95% est du au contenu qui dépassé sur la droite de la fenetre?

	#content {
		margin:0 0 15px 0!important;
		padding: 10px 10px 0 10px;
		width: 95% !important;
		font-size: 1.2em;
	}

Raphael a écrit :
9) Réordonnement des contenus. C'est le bonus final : On fait le choix d’afficher systématiquement les blocs de contenus en priorité, puis la navigation principale, puis le pied de page grâce au modèle de boîte flexible et sur l’ordre d’affichage des blocs via la propriété box-ordinal-group.

Intéressant, je viens de lire un tuto à ce sujet, dommage qu'il ne soit pas interprété par tous les navigateurs. Je ne vois pas les fonctions "display: box;" et "box-ordinal-group"... Tu les utilises?

a écrit :
Je ne le vois pas, normal? Comment as tu réalisé ce message?

Tout simplement avec un contenu généré avec le pseudo élément :after (reconnu par tous le monde sauf IE mobile - forcément - et les trucs proprio comme Nokia, LG ou Ericsson)

a écrit :
Tu as passé les width en auto, c'est pareil que 100%?

Non ce n'est pas pareil : width : 100% est trop dangereux, il suffit qu'un petit padding ou une border de rien du tout traîne et casse tout puisqu'ils s'ajoutent à la largeur.

a écrit :
Je ne vois pas les fonctions "display: box;" et "box-ordinal-group"... Tu les utilises?

Je viens de les supprimer il y a environ 10 minutes * (cela créait un bug d'affichage sur Safari en fin de compte).
C'est reconnu par les moteurs Webkit (donc iPhone, iPad, Android) et Fennec, donc plutôt bien répandu.

* par contre, quand tu as écrit ton message, ils apparaissaient bien dans le code source.
Modifié par Raphael (30 Nov 2010 - 10:26)

Raphael a écrit :
Tout simplement avec un contenu généré avec le pseudo élément :after (reconnu par tous le monde sauf IE mobile - forcément - et les trucs proprio comme Nokia, LG ou Ericsson)

Peux tu m'en dire un peu plus, je vois rien dans la source. Il me reste plus que ça à faire. c'est du JS, css, html?

a écrit :
Non ce n'est pas pareil : width : 100% est trop dangereux, il suffit qu'un petit padding ou une border de rien du tout traîne et casse tout puisqu'ils s'ajoutent à la largeur.

Merci pour l'info, je vais relire ta source et faire les modifs, il est vrai que du coup je me suis fais ch*** à passer les padding en %, du genre largeur 96% padding left 2% et right 2%... lol

a écrit :
Je viens de les supprimer il y a environ 10 minutes * (cela créait un bug d'affichage sur Safari en fin de compte).
C'est reconnu par les moteurs Webkit (donc iPhone, iPad, Android) et Fennec, donc plutôt bien répandu.

Au final, tu as trouvé une solution alternative ou tu laisse le contenu dans l'ordre?

Dernière question, j'ai cherché sur google mais je n'ai toujours pas compris, tu appliques des !important partout et je ne sais plus à quoi ils servent...

En tout cas, un très merci à Alsaceration, mon site est ce qu'il est grace à vous!!!!