#media_queries

Let’s compare two media-query declarations:

@media (min-resolution: 341dpi) and (min-width: 767px) > {
}

and

@media (max-resolution: 131dpi) and (min-width: 767px) > {
}

At first glance, this doesn’t seem like much of a separation, right? Wrong. The numbers I’ve used are specific to the HTC Windows Phone 8X (the first snippet) and the iPad 2 (the second snippet). By using the resolution query, one can basically separate physically small devices from large devices.

#mobile

ah ouais !

Testé sur mobile, c’est nickel !

Beau travail @seenthis, vous avez bien mérité vingt minutes de sommeil.

Quel travail ; bravo et merci !

ah #seenthisbug : auteurs / me suggérer des contacts

+1000, #seenthis_ça_roxxe
J’attends un petit peu que la peinture sèche avant de remonter (d’éventuels et légers) soucis :)

Sous Android 4.1 avec le brouteur standard la barre de recherche/login saute, cad elle se met bien en bas de l’écran mais quand on fait bouger le contenu vers le haut, la barre bouge avec avant de se remettre à sa place en bas de l’écran. Même chose quand on pousse la page vers le bas, mais là c’est moins gênant.

Ah oui, mon dernier « billet » est hyper-chiant, car il est tellement long et ennuyeux, on peut « scroller » pendant des minutest avant d’arriver à sa fin. Une fonction pour plier/déplier des messages longs serait la bienvenue.

Par contre c’est super la navigation en bas de l’écran une fois qu’on est connecté. Chapeau !

Sous Google Chrome pour Android le problème avec la barre de recherche/login sautillante ne se produit pas.

Je continue avec mon Google Nexus S /Android 4.1 :
Und fois connectė une surface grise se glisse par des su l’ėcran quand on scrolle. Elle saure vers le bas pour faire Palace au comtenu et à als Barre de navigatio (Google Chrome).
Ecrire des commentaires marche trres bien - si seulement Chrome n’essayait pas de corriger mes « Fa Utes » pour en rajouter d’énormes erreurs.

Encore sous Android, cette fois avec Firefox mobile c’est encore mieux. Quand on est connecté c’est quasiment parfait, on peut scroller à n’importe quelle vitesse, pas de surface grise ou noire provoquée par le trop rapide mouvement. Quand on n’est pas connecté par contre l’effet est présent sous une forme légèrement différente que dans Chrome et le brouteur Android.

Zut, mon Firefox sous Android vient de crasher, il n’y a même pas de capture d’écran dans le menu Android des derniers apps utilisées comme il y a d’habitude.

Avant je venais de remarquer qu’on peut se connecter mais que le dialogue est pénible à remplir sous tous les brouteurs car il disparait sous le clavier virtuel.

Bonne nuit et félicitations pour cette beta impressionnante. C’est pleinement utilisable !

Sous Android, je ne peux pas me connecter. Le pop up de connexion entre en conflit avec le clavier virtuel quand je veux taper le mot de passe.

Sous itrucmachinmininanopad c est tout simplement extra !

Je pense faire une page séparée de connexion, parce que de toute façon ça pose beaucoup de difficultés :
– code pourri pour gérer les erreurs en Ajax (pas dément),
– dépliage qui semble déconner (même sur PC) sur certains brouteurs,
– confusion ergonomique avec l’inscription,
– espace drôlement rikiki.

@monolecte Tu peux te connecter sous Android en faisant glisser le dialogue de connexion vers le haut pour le faire réapparaître.

si je perçois bien les choses, ça veut dire qu’on a plus la possibilité quand on dézoome une page de rétrécir la police en même temps ?

Si vous forcez le rechargement des CSS, il y a une foule de petits détails qui ont été changés. Notamment à destination des très petits écrans (éviter les colonnes de texte trop étroites).

Ben oui, mais j’ai un gros nécran avec une colonne perdue au milieu !

Ça a l’air mieux qu’avant sur Nokia S40 et Opera Mini en tt cas, merci !

iPad : excellent affichage en mode vertical ; mais le clic sur l’étoile reste délicat

iPad : difficile aussi de trouver le bouton « modifier » sur les messages ; le shift-return n’est pas pris en compte (j’ai un clavier externe)

@fil : oui, ça c’est pas du tout traité : virer un certain nombre de trucs masqués qui apparaissent au survol, vu que c’est assez bloquant en interface tactile.

Et comme d’habitude il faut un fix pour IE, le voici :

https://github.com/paulirish/matchMedia.js

Intéressant.

Truc à prendre en compte aussi désormais : la télé est désormais un écran d’excellente qualité, de définition 1920x1080, mais qu’on regarde depuis une distance de plusieurs mètres. Va falloir penser aux bons media-queries là aussi.

D’excellente qualité… pas forcément.

c’est pas twittable des choses pareilles… mais bien le coup des media-queries inversées !

Ah, j’oubliais : c’est le premier site où j’ai systématiquement utilisé mon pseudo-style :

-spip-clear : fix ;

qui fabrique n’importe où l’évacuation des float en fin de bloc (auto-clear, quoi). C’est super-super-pratique, puisque
– par principe ça évite de mettre des blocs « nettoyeurs »,
– là c’est purement dans les CSS (pas besoin de nommer spécifiquement des blocs « .clearfix »),
– du coup, c’est même compatible avec les media queries, puisque je peux faire du « auto clear » pour certaines largeurs et pas dans d’autres.

Ça n’a l’air de rien, mais ça change assez nettement la façon de coder les pages.

il manque le tag #religion !

Exemple de media queries insérés à l’intérieur de la structure des CSS :

http://pastebin.com/NkWDkue1

Roh c’est top ce truc. Ça rend les CSS super lisibles du coup...

ah oui super, ca peut intéresser @baroug même si lui c pas la grid 12 mais la 16 qu’il utilise.

Salut @BoOz,
Tu as aussi http://html5boilerplate.com/mobile , très complet, à expurger selon les besoins.

#css #mobile

Faudrait que je teste un jour, mais j’aime #LESS qui a l’avantage de ne pas être lié à #SPIP...

Mais pourquoi un tag #responsive_web_design ? Quel rapport ?

Parce que si tu veux faire du responsive web design, les media queries sont les bienvenues, et c’est en prévision de ça que j’ai introduit cette façon de procéder (les @media queries hiérarchisées à l’envers) dans le plugin.

c’est vraiment top mais en effet ce serait encore plus top d’essayer de converger avec #less ►http://lesscss.org ; de ce que j’ai vu rapidement, il y aurait deux ou trois détails de syntaxe + les variables

Ça ne me semble pas évident :
– on a déjà une syntaxe dans SPIP,
– mon plugin permet parfaitement d’utiliser la syntaxe de SPIP.

La convergence, si elle revient à ajouter une syntaxe tirée de Less à la syntaxe existante de SPIP, ça me semble assez casse-gueule. Les variables de LESS s’ajouteraient aux variables SPIP, et les fonctions de LESS s’ajouteraient aux fonctions de SPIP, avec en plus une syntaxe différente.

@fil @arno L’intérêt de passer plutôt par LESS serait de pouvoir commencer sur SPIP en récupérant telles quelles des intégrations HTML/LESS, ça commence à devenir plus courant...