1485 sujets

Web Mobile et responsive web design

Media query fonctionne dans Mozilla mais pas safari ?

Bonjour,

J'essai pour la première fois de faire du responsive sur mon petit CV en ligne. Sauf que ce j'ai fait fonctionne dans la vue adaptative de Mozilla, mais ne fonctionne pas sur celle de Safari ... Je ne comprend pas. De plus, quand je cumule trois média query pour 3 tailles d'écrans différentes, il n'y en a qu'une qui fonctionne .?. Je vous met le bout de code :

@media all and (max-device-width: 1100px)
{
    a
    {
        font-size: 0.6rem;
    }

    h2
    {
        width: 18rem;
    }
}

@media all and (max-device-width: 840px)
{
    h2
    {
        width: 17rem;
    }
}

@media all and (max-device-width: 780px)
{
    .containeur1
    {
        flex-direction: column;
    }

    .containeur2
    {
        flex-direction: column;
    }

    a
    {
        width: 100%;
    }
}
Administrateur
Hello,

La partie "all" est inutile puisque c'est la valeur par défaut.
Ensuite, "device-width" est souvent trompeur.

Peux-tu tester avec ce type de media queries plutôt : 
@media (max-width: 780px)
Raphael a écrit :


C'est parfait, ça a marché !

Mais du coup, je ne comprends pas bien pourquoi mon Device gênait ? Device, ce n'est pas pour la taille de l'écran. Je demande car j'avais lu tout un article avant de choisir cette formulation et je me demande ce que j'ai mal compris ...
Modérateur
Salut !

Si on regarde les spec : https://developer.mozilla.org/fr/docs/Web/CSS/@media/device-width device-width est obsolète et "en cours d'éradication" ça peut expliquer les différence entre navigateurs.

Sinon au delà de ça, il me semble que le device-width sur un PC va retourner, comme son nom l'indique, la largeur du device donc de l'écran, peut importe la taille de la fenetre, du viewport etc... non ? Et comme tu le teste depuis la "vue adaptative" de tes navigateurs je ne suis pas sur que ça ai un effet et que ca vienne overrider la valeur physique de ta largeur d'écran..

Ce que tu cherches ici c'est pas vraiment la largeur de l'écran mais la largeur de la zone d'affichage (viewport), même si sur mobile c'est souvent la même.

https://developer.mozilla.org/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries
_laurent a écrit :

En effet, je n'avais pas vu que c'était devenu obsolète, on l'abordait pourtant dans le cour d'Openclassroom que j'ai suivit Smiley sweatdrop . Merci beaucoup de l'info.

Raphael a écrit :
J'ai lu l'article, merci beaucoup, il était très intéressant. Donc si j'ai bien compris, il est préférable de mettre une balise meta dans le head, mais doit-on définir une seule taille ou peut-on en définir plusieurs ? Comme on peut avoir plusieurs points de rupture, par exemple les téléphones, les tablettes, les petits PC et les grands, doit-on mettre plusieurs tailles par catégorie et donc limiter nos points de ruptures ? Ou c'est moi qui confond les deux ?

Et question subsidiaire : j'ai vu qu'il y avait une balise pour autoriser le zoom (user-scalable), doit on obligatoire l'autoriser pour les questions d'accessibilité ou c'est par défaut ?
Bonjour,
il semblerait que, devant la grande variété des tailles d'appareils, on ne puisse plus suivre avec de multiples @media. J'ai un site en css pur, avec des tas de @media pour chaque résolution. C'est du lourd, mais ça fonctionne et je n'ai pas le courage de tout reprendre afin de vérifier si on peut n'utiliser qu'un point de rupture pour un site de ce genre. J'en ai un autre sous grid, avec un seul point de rupture "@media (max-width: 35em)", et il est adapté à énormément d'appareils, bien que je ne les aient pas tous testés (!!!). Je ne demande qu'à améliorer, si on me prête des appareils exotiques.
Pour le zoom, c'est à toi de décider. La balise meta-viewport n'est pas préférable, elle est indispensable. Le mieux est de mettre "initial-scale=1.0". user-scalable=yes fonctionne aussi et je ne crois pas que ce soit par défaut. Oui, une seule balise meta-viewport dans le head. Ne confonds pas, les @media se mettent dans le css. À chaque nouveau @media, il y aura une partie de css qui va avec.
Bon courage, même sans formation, on y arrive, il y a tout sur le net.
Modifié par Bongota (07 Feb 2020 - 18:52)
Je me suis exprimée je pense sur ce que je voulais dire en parlant des meta et des media.

Ma question était plus : est ce que l'on met plusieurs meta dans le head, avec plusieurs taille, par exemple 300px, 600px et 900px. Et du coup est-ce que cela fait que nos seuls points de ruptures à gérer sont 300px, 600px et 900px ?

Ou est-ce que les points de ruptures n'ont rien à voir avec la définition du Viewport dans le meta ?
Modérateur
Loonie a écrit :
Ou est-ce que les points de ruptures n'ont rien à voir avec la définition du Viewport dans le meta ?

Les point de rupture n'ont rien a voir avec la meta viewport. La meta défini le cadre en gros, la configuration du viewport. Et ensuit les media viennent dans le CSS adapter ton interface.

Loonie a écrit :
Ma question était plus : est ce que l'on met plusieurs meta dans le head, avec plusieurs taille, par exemple 300px, 600px et 900px. Et du coup est-ce que cela fait que nos seuls points de ruptures à gérer sont 300px, 600px et 900px ?

Bon alors du coup on ne décris pas de point de rupture dans la meta viewport. On les utilise dans les média comme tu l'as fait (mais avec width au lieu de device-width Smiley cligne ).

Les valeurs et le nombre de breakpoint peuvent se définir :
- soit par les devices : je veux qu'en dessous de 900px ce se transforme en interface mobile, meme si ça continue à bien s'afficher sans rien faire
- soit par la rupture du design. Exemple : à 983px de large ton logo touche le menu et saute a la ligne, bref tout est en vrac et c'est moche, alors tu décides de mettre un breakpoint à 990 ou 1000px et tu changes l'interface pour que tout roule. Et à toi le voir combien de fois tu veux le faire et si tu le fais indépendamment pour chaque élément de ton site ou une fois pour tout le site...
Ok, c'est bon, c'est clair pour moi. Je vous remercie en tout cas de m'avoir répondu !
Sujet clos
Aller à