Version imprimable
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
- Atttribut CSSCode:<input type=text width=10 />
- Attribut CSS (bis)Code:<input type=text style='width:10px' />
Code:input[type=text]{width:10px;}
Merci d'avance ;)
tu peux utilisé "size" exemple
Code:<input type=text size="30" />
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
Pourtant, cela fonctionne très bien.
Quand on met des points virgules à la fin du style.Code:
2
Ta façon d'écrire ceci :
Cela génère quatre erreurs à la validation Xhtml.Code:
2
Euh, tu as essayé sur quel mobile???
Quel mobile ?Citation:
Envoyé par Wapper
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
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'écritureCitation:
Envoyé par Wapper
est fausse ;)Code:<input type=text style='width:10px' />
De plus en dev mobile il est fortement déconseillé de modifier les dimensions http://www.w3.org/TR/2006/PR-mobile-.../#bpgroupinput
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?
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 ?
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... :cry:
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.Citation:
Envoyé par Wapper
Je sais ;)Citation:
Envoyé par Wapper
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.
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)
En cherchant un peu on trouve :
Source : http://www.developershome.com/wap/xh...lFeaturesLost2Citation:
XHTML MP Does Not Support the Format Attribute for Input Fields
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
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"... :)
Bon, un peu de HS :P :
Ça reste du XHTML basic.Citation:
Envoyé par Ethyde
D'autre part, certains terminaux mobiles interprètent uniquement le XHTML MP.
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).Citation:
Envoyé par Wapper
Il y a :Citation:
Envoyé par 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 :Citation:
Envoyé par Macmillenium
- 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.
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.Citation:
Envoyé par Ethyde
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 :
(480px = largeur du viewport d'iPhone en mode paysage.)Code:
2<link type="text/css" rel="stylesheet" media="handheld, only screen and (max-device-width:480px)" href="mobile.css" />
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.
Avec ou sans JS ? le viewport meta tag n'a rien à voir avec JS ;)Citation:
Envoyé par Ethyde
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 y a plusieurs scripts ;)Citation:
Envoyé par Ethyde
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.Citation:
Envoyé par Macmillenium
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.
De l'usage de la meta viewport pour Iphone (avec ou sans Js ;) )Citation:
Envoyé par Macmillenium
http://blog.jaysalvat.com/articles/o...ipod-touch.php
Il me semble oui, mais je n'ai pas testéCitation:
Envoyé par Macmillenium
Surement et heureusement :)Citation:
Envoyé par Macmillenium
J'ai testé sous OperaMini4 installé sur un mobile HTC et je n'ai eu aucun problème.Citation:
Envoyé par Ethyde
On pourrait même voir le bon comportement sur l'émulateur officiel d'OperaMini :fleche: http://www.opera.com/mini/demo/
Ç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 ;)Citation:
Envoyé par Ethyde
D'ailleurs Apple préconise l'usage des Média Queries.
Je ne vois toujours pas le rapport entre le JS et le viewport meta tag :aie:Citation:
Envoyé par Ethyde
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 ?