Discussion :

[V1ce37]

Bonjour,

J'ai un soucis avec les viewport je mexplique :

Je suis en train de construire un site responsive (mon 1er) et j'utilise un système de grille que j'ai construit, un peu comme bootstrap. J'ai dû rajouter le viewport width=device-width et zoom:1 afin que le redimensionnement de mes éléments soit bien pris en compte sur mobile, que les bordure ne s'efface pas etc.. , cela marche très bien avec cette balise.

Cependant certains de mes éléments comme une galerie photo et un calendrier sont beaucoup mieux redimensionner sur mobile sans la balise viewport, c'est le zoom le l'initial scale qui pose problème , en fait quand je suis sans viewport ma galerie et mon calendrier sont entièrement visible en longueur et largeur quand je passe sur mobile, mais quand je place la balise viewport, bien que la largeur reste dans le cadre, ce n'est pas le cas pour la longueur qui oblige a scroll pour voir entièrement l'élément, c'est ce ... zoom.

Un autre soucis (sur mobile uniquement...) avec ma galerie photo par exemple, quand j'enlève les paramètres viewport elle prend bien en compte les paramètres mediaqueries (bien que le zoom du viewport pose probleme) et se redimensionne mais d'autres éléments non ( comme les onglets de navigation)... . Je comprend que les mobile ne prennent pas en compte les media queries sans la balise viewport mais alors pourquoi dans mon cas j'ai des éléments pris en compte et d'autres non alors qu'ils utilisent les même classes css pour gérer le responsive? De toute façon même si les media queries fonctionne sans viewport il m'est impossible de rester comme ça car des morceaux bordures de mes elements etc disparaissent sur mobile...

Cette balise m'est apparemment indispensable mais est un vrai handicap dans certains cas et m'oblige à aller bidouiller les longueur de mes éléments dans les media queries chose que je ne veux pas faire, je vous avoue ne pas savoir comment m'en sortir, Ce que je voudrais c'est exclure certains éléments du viewport mais pas possible vu que celui-ci est appliqué à la page

Merci pour votre aide.

[Invité]

Bonjour,
qu'est-ce que tu préfères :

• qu'on te réponde au pif ?
• ou que tu nous montres ton code (ou une page en ligne : c'est toujours mieux pour tester...) ?

[V1ce37]

Bonjour,

Vu que je travail avec un framework je voulais éviter dans un premier temps de poster mon code voir si déjà quelqu'un voyait quelque chose de faux dans mon raisonnement sur les media queries et le responsive.

J'ai avancer dans mon problème :

- Déjà le soucis de non redimensionnement d'élément sur mobile venait du fait que j'avais mis une classe responsive intermédiaire pour les écran moyen sur les onglet de navigation et le mobile prenait en compte celle-ci... De ce coté c'est simple j'ai construit ma grille pour 3 taille d'écran col-l-x(min 1200px), col-m-x(min 960, plus pour tablette) et col-s-x(le reste pour mobile), du coup mes onglet prenez en compte le col-m-x, ce qui veux dire que mon mobile de test est pris en compte avec un écran entre 960 et 1200 sans les viewport... Je préfère largement l'affichage sur mobile sans viewport, ça nécessite beaucoup moins de rattrapage css, surtout sur les longueur. Du coup dans mon cas avec ce mobile je dois gérer 2 taille,les écran au dessus de 1200px et les autres, mais si des mobile ou tablette sont pris en +1200px sans viewport ca pourrait poser des problème... J'ai aussi des bordure s'effacent quand je suis sur mobile sans les viewport, là pour l'instant j'ai que des bordures en 1px solid black sur toute mes div pour les tests donc je les enlèverais, mais est-ce que cela ne risque pas de se produire si j'inclus des bordure pour mon le site en production?

J'ai essayer de baisser le zoom de l'initial scale à 0.5, le site est zoomer comme je le voudrais mais par contre mon mobile est repris en mode normal comme si je n'avait pas les viewport, alors que j'ai bien le paramètres width=device-width, si je le remet à 1.0 mon mobile est repris selon sa taille, comprend pas...

En fait j'ai commencer le site directement avec les viewport, cela me convenait très bien au début je positionner mes element (souvent vide ou presque :/ ), je tester sur mobile tout aller bien, mais dès que j'ai commencer à intégrer un calendrier, des slide, des galerie photo etc... y'a un gros soucis de longueur (dû au zoom) sur mobile qui m'oblige a scroll, très déplaisant, je dois retoucher le css un max pour avoir un beau truc, trop de bidouille après... Alors que ces éléments sans viewport même si moins zoomés sont beaucoup mieux dimensionnés de base.

Il est possible que je donne une adresse, mais pas sur le forum.

[kakashi99]

Il est possible que je donne une adresse, mais pas sur le forum.

comme dis plus haut par jreaux62 sans code on ne peut pas faire grand chose... même sans nous donner accès à ton site, mets en ligne un exemple sur jsfiddle ou un autre outils du genre.

[V1ce37]

Bonsoir,

Honnêtement je ne vois pas quel code vous fournir étant que je n'ai pas vraiment de soucis avec, ne serait-ce que cette satané ligne :p

Code html :

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

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

Je pense que j'ai plus un problème de compréhension avec le responsive qu'autre chose, je veux adapter mon site au format mobile mais je ne veux pas retoucher le css afin que mes éléments de type galerie photo calendrier, slide etc.. puissent être vu entièrement sur l'écran sans scroll mais apparemment je n'ai pas vraiment le choix...

[Invité]

OK, je pense comprendre...

SANS <meta name="viewport"...>, le site a un comportement PAR DEFAUT sur smartphone, qu'il soit "responsive" ou non.
PAR DEFAUT sur smartphone, n'importe quel site est affiché AUTOMATIQUEMENT dans TOUTE sa largeur, par un simple "redimensionnement en proportion de la page COMPLETE".
En clair, il a exactement le même aspect que sur desktop... mais en petit !

C'est donc l'intérêt du "responsive" de modifier ce comportement par défaut, en proposant une autre mise en page,....

DANS TON CAS :
SANS, les tables, calendriers,... sont inclus dans la "page complète", et redimensionnés avec elle. Donc non problemo.

AVEC "viewport", il faut des dimensions en %, pour que les éléments s'ADAPTENT.
Pour tes tables, calendrier, le fait est qu'ils ont une largeur MINIMUM au delà de laquelle on ne peut plus réduire.
Cette taille dépend du nombre de colonnes et de leur contenu.
SI tu réduit la taille de fenêtre à une largeur inférieure à cette largeur MINIMUM, les éléments vont... dépasser le cadre.

[V1ce37]

Merci pour ta réponse,

Au niveau de la largeur pas de soucis, j'ai créer des classe responsive en pourcentage, le gros travail sera sur la longueur.