Discussion :

[Lcf.vs]

Bonjour,

J'ai un petit soucis, je ne parviens pas à définir la largeur d'un input type=text en XHTML Mobile Profile en pixels ou en pourcentages (et non en rows, par soucis de précision et de portabilité)

Quelqu'un pourrait-il me dire comment faire, svp?


Déjà essayés, en vain:

- Recherches sur Google

- Attribut de l'input

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type=text width=10 />

- Atttribut CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type=text style='width:10px' />

- Attribut CSS (bis)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

input[type=text]{width:10px;}

Merci d'avance

[Helmi.Ghribi]

tu peux utilisé "size" exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type=text size="30" />

[Lcf.vs]

Merci d'avoir répondu mais non merci, je m'explique:

L'unité de l'attribut "size", c'est le row (la colonne), justement ce que je ne veux pas...

Les raisons sont très simples:
*- Manque de précision (comparés aux pixels ou pourcents)
*- Portabilité exécrable (les navigateurs l'interprètent chacun à leur sauce)

J'insiste donc sur l'importance de spécifier la longueur en pixels ou en pourcents

[FredPsy]

Pourtant, cela fonctionne très bien.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<input type="text" style="width:10px;" />

Quand on met des points virgules à la fin du style.

Ta façon d'écrire ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<input type=text style='width:10px' />

Cela génère quatre erreurs à la validation Xhtml.

[Lcf.vs]

Euh, tu as essayé sur quel mobile???

[FredPsy]

Euh, tu as essayé sur quel mobile???

Quel mobile ?
Non, je dis juste que ta structure xhtml est un peu bancal, du coup, c'est peut être pour ça que ça ne fonctionne pas

[Lcf.vs]

Ben, non, ça n'a rien à voir...

XHtml MP (ou XHtml Mobile Profile, XHtml pour gsm, quoi...)

[Ethyde]

Ben, non, ça n'a rien à voir...

XHtml MP (ou XHtml Mobile Profile, XHtml pour gsm, quoi...)

Hum le Xhtml MP (ou pas) reste quand même du xhtml, donc l'écriture

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type=text style='width:10px' />

est fausse

De plus en dev mobile il est fortement déconseillé de modifier les dimensions http://www.w3.org/TR/2006/PR-mobile-.../#bpgroupinput

[Lcf.vs]

Les meilleures pratiques? je les ai lues (en français d'ailleurs)...

Je pense que si tout mon site respecte toutes ces pratiques sauf une, je ne pense pas que cela suffise pour en faire un mauvais site... si?

De plus, mon site sera un portail privé, du coup, les règles de la conformité W3C, on s'en fout un peu...

Attention, je ne veux pas dire, par-là, faire tout et n'importe quoi, hein, j'vous vois venir avec les réprimandes pour ce que je viens d'oser dire sur la conformité W3C. ^^

En fait, il y a une raison toute simple à mon choix, pour un champ de date, j'aimerais pouvoir avoir chacun de mes 3 champs les uns à côté des autres avec des dimensions qui s'adaptent à la taille de l'écran du mobile de l'utilisateur, tel que tout le reste de mon design (donc, oui, je cherche plutôt en % qu'en px ou en rows).

Ça éviterait m'éviterait d'avoir un bête champ texte où il faudrait écrire la date ainsi: DD-MM-YYYY ou DD/MM/YYYY, etc, c'est moche.

Bien-sûr, il y a les select, mais c'est lourd pour une page wap et, pire, certains navigateurs wap ouvrent une sorte de popup pour le select, bon, ceux où c'est le cas, c'est pareil pour un input type text mais pour un select c'est beaucoup plus lent.

Ai-je assez justifié mon choix?

[Ethyde]

Attention hein je juge pas, je répond nuance

Pour ton probleme tu as essayer de mettre tes inputs dans des cellules de tableau, ainsi c'est sur elle que tu définirais tes proportions ?

[Lcf.vs]

Merci pour l'idée mais c'est ce que j'avais fait au départ mais les anciens gsm ne l'interprètent pas en entier, d'ailleurs, les tableaux non-plus ne sont pas recommandés en dev mobile...

J'pense à faire des div autour de mes inputs mais niveau sémantique, pas top et ça alourdit la page alors qu'un simple attribut devrait suffire...

[Ethyde]

Merci pour l'idée mais c'est ce que j'avais fait au départ mais les anciens gsm ne l'interprètent pas en entier

Pour ça, encore plus que pour le web classique, il faut faire des choix et la "dégradation" est très difficile à mettre en œuvre. Si tu veux être full compatible tout téléphone même les plus ancien, et à moins que tu ne sachent lequel des dizaine de modèles (auquel cas il te faudra faire des version spécifique)ne sont pas compatible tu ne pourras pas toucher TOUS les mobiles. Il n'y a pas, pour les mobiles, de hack possible, comme avec IE sans passer par un gros script (php) de redirection vers une version spécifique.

les tableaux non-plus ne sont pas recommandés en dev mobile...

Je sais

De plus il y a, à mon sens, un net différence entre structurer un site entier en tableau et s'en servir pour palier à un probleme. Surtout en dev mobile où rien, mais alors rien n'est standard, du moins coté navigateur/constructeur.

[Lcf.vs]

Ben, jusqu'ici, je n'ai testé que sur un vieux Nokia 2626 et sur un Lg Viewty et ce qui passe pour l'un passe pour l'autre, juste en codant proprement en Xhtml et en enfermant les textes et liens dans des paragraphes...

J'ai d'ailleurs viré les balises xml qui ne servaient à rien et qui m'obligeaient à les envoyer au navigateur par un echo, donc plus lourd pour le serveur...

Le seul hic, c'est ce foutu width qui ne veut pas passer en autres unités que les rows... (avec ou sans xml)

[Ethyde]

En cherchant un peu on trouve :

XHTML MP Does Not Support the Format Attribute for Input Fields

Source : http://www.developershome.com/wap/xh...lFeaturesLost2

Et dans la suite : Controlling the Type and Number of Characters to be Entered in Text Fields (-wap-input-format Property)

Ah et pour ce qui est de tester un site mobile :

A Guide to Mobile Emulators

MobiReady

[Lcf.vs]

Merci pour les liens concernant les émulateurs... je ne les avais pas encore...

Par contre, à propos de ceux de developershome, je suis déjà passé par-là et si tu avais lu l'article, quand ils parlent de format, il ne s'agit nullement du style, d'ailleurs, rien que le deuxième lien veut tout dire...

Bref, toujours pas de solution...

Sinon, pour le moment, je délimite la taille de mes inputs par des divs...

Tiens, sur les émulateurs, je suis à 4/5, je vais essayer d'encore améliorer cela...


Edit: 5/5

Seul avertissement restant (logique), c'est parce que je n'indique pas de valeur par défaut dans mes champs "pseudo" et "mdp"...

[Macmillenium]

Bon, un peu de HS :

Hum le Xhtml MP (ou pas) reste quand même du xhtml, donc l'écriture

Ça reste du XHTML basic.
D'autre part, certains terminaux mobiles interprètent uniquement le XHTML MP.

De plus, mon site sera un portail privé, du coup, les règles de la conformité W3C, on s'en fout un peu...

La validité syntaxique garantit un maximum de compatibilité avec les différents UA surtout que certains sont capables de télécharger la DTD (Cf Les specs HTML4).

Il n'y a pas, pour les mobiles, de hack possible, comme avec IE sans passer par un gros script (php) de redirection vers une version spécifique.

Il y a :

• Les Média Queries (implémenté sur quelques UA) ;
• Le viewport meta tag ;
• La détection de la taille du viewport en JS (pour les appareils qui le supportent) ;
• Et le browser sniffing (le gros script php dont tu parles )

[Ethyde]

• Les Média Queries (implémenté sur quelques UA) ;
• Le viewport meta tag ;
• La détection de la taille du viewport en JS (pour les appareils qui le supportent) ;
• Et le browser sniffing (le gros script php dont tu parles )

Pour avoir fait le teste dernièrement avec téléphone à porté de main et les emulateurs :

- Les media queries ne marche pas vraiment correctement (y comprit avec opera mini qui en est pourtant un des chantres),
- le viewport marche vraiment bien sur iphone mais ailleur bof (voir moins) avec ou sans Js,
- reste le browser sniffing (le script de mobiForge hein ? ) que je n'ai pas réussis à mettre en défauts.

[Macmillenium]

- Les media queries ne marche pas vraiment correctement (y comprit avec opera mini qui en est pourtant un des chantres),

Le problème ne vient pas des Media Queries, mais de la manière dont les UA l'implémentent, on parle alors d'une mauvaise ou d'une insuffisante implémentation.
D'autre part, l'article auquel tu fais référence date un peu et ne parle pas de OperaMini

Sinon :
- OperaMini4 implémente correctement les Média Queries et heureusement étant donné qu'il supporte les deux médias handheld et screen, OperaMini3- supporte uniquement le media handheld ;
- Safari iPhone implémente également les Média Queries mais ne supporte pas le média handheld.

Pour faire une simple combinaison, on peut par exemple écrire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

(480px = largeur du viewport d'iPhone en mode paysage.)

Et si on veut faire l'inverse, ç-à-d, viser les grands écrans (600px et +) via les Média Queries, alors :
- Pas d'IE ;
- FF3.5+ ;
- Safari3+ (probablement les autres navigateurs basé sur Webkit) ;
- Opéra7+ ;
- Je n'ai pas testé sous konqueror.

- le viewport marche vraiment bien sur iphone mais ailleur bof (voir moins) avec ou sans Js,

Avec ou sans JS ? le viewport meta tag n'a rien à voir avec JS
En revanche, il a l'air de fonctionner correctement sur Blackberry qui, à ma connaissance, ne supporte ni les Média Queries, ni le média handheld.

(le script de mobiForge hein ? )

Il y a plusieurs scripts

[Ethyde]

Le problème ne vient pas des Media Queries, mais de la manière dont les UA l'implémentent, on parle alors d'une mauvaise ou d'une insuffisante implémentation.
D'autre part, l'article auquel tu fais référence date un peu et ne parle pas de OperaMini

Sinon :
- OperaMini4 implémente correctement les Média Queries et heureusement étant donné qu'il supporte les deux médias handheld et screen, OperaMini3- supporte uniquement le media handheld ;
- Safari iPhone implémente également les Média Queries mais ne supporte pas le média handheld.

Les téléphones que j'ai à dispo et mon Archos (du moins dans leur configuration standard) ne sont pas d'accord avec toi : dans les deux cas il m'a fallu faire une manip de configuration afin d'indiquer d'appliquer les styles portable si présent. De fait ce n'est pas une méthode efficace dans la pratique.
Et sur Iphone il ne l'a jamais vue tout simplement (et je cherche encore si c'est configurable). Mes tests datent d'il y a moins d'un mois je doute donc que cela ait changé tant que ça depuis

Alors oui certes ça marche une fois l'option de navigation "écran optimisé" ou "Mobile view" (pour OperaMini) activé, mais il me semble difficile de demander à un visiteur de configurer son téléphone et/ou son navigateur mobile afin de pouvoir profiter du site.

Avec ou sans JS ? le viewport meta tag n'a rien à voir avec JS

De l'usage de la meta viewport pour Iphone (avec ou sans Js )
http://blog.jaysalvat.com/articles/o...ipod-touch.php

En revanche, il a l'air de fonctionner correctement sur Blackberry qui, à ma connaissance, ne supporte ni les Média Queries, ni le média handheld.

Il me semble oui, mais je n'ai pas testé

Il y a plusieurs scripts

Surement et heureusement

[Macmillenium]

Les téléphones que j'ai à dispo et mon Archos (du moins dans leur configuration standard) ne sont pas d'accord avec toi : dans les deux cas il m'a fallu faire une manip de configuration afin d'indiquer d'appliquer les styles portable si présent..
[..]
Alors oui certes ça marche une fois l'option de navigation "écran optimisé" ou "Mobile view" (pour OperaMini) activé

J'ai testé sous OperaMini4 installé sur un mobile HTC et je n'ai eu aucun problème.
On pourrait même voir le bon comportement sur l'émulateur officiel d'OperaMini http://www.opera.com/mini/demo/

Et sur Iphone il ne l'a jamais vue tout simplement (et je cherche encore si c'est configurable). Mes tests datent d'il y a moins d'un mois je doute donc que cela ait changé tant que ça depuis

Ça marche parfaitement sur mon iPhone, tu as peut-être testé sur un faux simulateur, personnellement, pour mes dev. iPhone je teste sur un émulateur basé sur le SDK d'iPhone (uniquement sous MacOS pour l'instant) et ça fonctionne bien
D'ailleurs Apple préconise l'usage des Média Queries.

De l'usage de la meta viewport pour Iphone (avec ou sans Js )
http://blog.jaysalvat.com/articles/o...ipod-touch.php

Je ne vois toujours pas le rapport entre le JS et le viewport meta tag
Tu parles de la détection de la taille du viewport en JS ou de la manipulation du tag (comme n'importe quel élément) en JS ?