Tester un site responsive

bonsoir
A--l'article récent sur comment tester un site responsive , n aborde pas le problème de taille du pixel (au pixel près arrondi ) et le fait que dans chrome ; activer ( web developper -> resize->) Display window size n'affiche en bas à droite que windows size mais aussi viewport size. En utilisant chrome developper Tool ( icone roue dentée) on peu définir un ensemble de largeur à deux endroits (Edit Resize dimension et View responsive Layouts). Le problème est que les valeurs width du fichier css le sont par rapport au Viewport et alors que celles du developper tool ( saisie des valeurs width ) le sont par rapport à windows. Y a til moyen de saisir les breakpoints en pixel viewport dans l interface de chrome ? ou de faire correspondre le windows au viewport ( Sous chrome le width du viewport est systématiquement plus petit de 16 px que le view du windows ( sans reset) . Pour un breakpoint a 320 ( px viewport CSS) , on visualise la valeur window size a 336px ! . Ou est la logique dans tout ça .

B--
le site http://alt-web.com/FluidGrid/Fluid1.html utilise plusieurs @media
max-width:481px et min-width:481px . si une même propriété est définie avec des valeurs différentes que se passe t il au niveau de 481 ? Le chevauchement est t il autorisé ? Je pensais qu 'il fallait après un @media max-width:481px; un @media min-width : 482px ; !!

C-
si une même propriété est définie au niveau de 2 intervalles avec des valeurs différentes dans une même fichier CSS. la propriété qui prime est celle qui se trouve dans le @media se trouvant à la fin du fichier?

Cordialement
firefox 29.0.1 impossible d'envoyer une image
Modifié par 75lionel (12 Jun 2014 - 15:12)

Bonjour,

Tester avec Chrome est bancal, en effet. Mieux vaut utiliser des services spécialisés ou des appareils réels, comme indiqués dans l’article.

Pour ta question des chevauchements, c’est un sujet déjà abordé par Thomas Zilliox et il en même tiré un bookmarklet.

Sinon, en ce qui concerne l’ordre des propriétés cela n’a rien à voir avec les media-queries. C’est le « C », dans CSS. Les media-queries respectent la cascade comme tout le monde, donc c’est bel et bien le dernier sélecteur ciblant un élément dans son contexte qui sera appliqué, ou alors celui qui aura le plus de poids. Mais en somme, tout respecte les bases du CSS.

Bon courage !

Des problèmes existent en utilisant un navigateur desktop pour visualiser les intervalles définies par mediaqueries.

La largeur de la page ne peut dans certains ne pas être visualisable dans un navigateur desktop si la largeur ( width) elle est trop petite. Ceci est du a la configuration de la barre vertical situé au dessus de la zone de visualisation de la page web ( champs de saisie de l URL , liste des icones des extensions ).


Il est difficile de lancer un bookmarket
1 avec une barre de menu vide !!!
2 sans champ de saisie de l'url /bookmarklet
breaq resout se problème en ouvrant une nouvelle page contenant une barre "minimal" . sinon on lance les bookmarklets depuis la console !!

La taille minimal horizontal de la page html ( avec scrollbar) correspondant à la taille minimal horizontal du navigateur a été mesuré pour firefox et Chrome .
chrome 333 avec le champ de saisie de l url a son maximal
firefox 160 px ( sans barre de menu )





Modifié par 75lionel (14 Jun 2014 - 00:55)

Un autre problème semble l utilisation de Freaq dans différent navigateur.
http://tzi.fr/css/responsive/breaq-bookmarklet###
En utilisant le site de l auteur et le bouton 459 , la taille par défaut de la nouvelle fenêtre qu ouvre le navigateur a la demande du script Breaq est différente .Cela ne veut pas dire que le rendu est mauvais ( il faut comparer
Voir la capture d'écran pour firefox 29.0.1 et chrome 37.0.2044.2 canary.


Modifié par 75lionel (12 Jun 2014 - 15:53)

un autre problème est que lorsque l on a ouvert les 2 fenêtres navigateur et debug pour observer un changement de valeur d attribut du aux mediaqueries. La valeur change car on le visualise sur la page si on sait ou le changement a lieu . Mais dans la fenêtre de debug si on active l onglet HTML , a gauche on sélectionne un balise avec un sélecteur (sel1) et a droite on selectionne ce selecteur (sel1) . Même si on sait que celui ci (sel1) possède plusieurs définitions selon le mediaqueries ( taille ) . Changer la taille du navigateur change le rendu mais pas la valeur de l attribut en temps reél !!! . il faut "switcher" avec un des autres onglets ( style calculé apparence) et revenir sur l onglet initial pour voir le changement .
D--Existe t il un navigateur qui supporte la mise a jour des valeurs des attributs en temps réel ?

cordialement

un autre problème de Breaq ( pas Freaq ) est que si on modifie le css depuis le debug du navigateur et si on clique sur une valeur , la modification effectuée dans le navigateur n'est plus pris en compte dans la fenêtre qui s ouvre .