Derniers messages sur Zeste de Savoirhttps://zestedesavoir.com/forums/2022-11-09T09:40:12+01:00Les derniers messages parus sur le forum de Zeste de Savoir.forcer le desktop mode sur un smartphone, message #2465722022-11-09T09:40:12+01:00LordVishnu/@LordVishnuhttps://zestedesavoir.com/forums/sujet/16468/forcer-le-desktop-mode-sur-un-smartphone/?page=1#p246572<p>It is pixels.
The <code>width</code> and <code>height</code> properties of the viewport meta tag indicate the width and height of the viewport. These can be specified as <code>px</code> or <code>%</code>. The value of <code>1024px</code> indicates that the viewport is 1024 pixels wide.
This means that the page will be rendered as if the width of the device is 1024px. This is helpful if the page is not responsive, or if you have fixed width elements<a href="https://gbplusmod.com/download-gbwhatsapp/">.</a></p>forcer le desktop mode sur un smartphone, message #2453582022-09-13T15:27:05+02:00viki53/@viki53https://zestedesavoir.com/forums/sujet/16468/forcer-le-desktop-mode-sur-un-smartphone/?page=1#p245358<p>Hello,</p>
<p>1024 c’est effectivement un nombre de pixels <em>pour CSS</em>. Les pixels en CSS ne correspondent pas toujours aux pixels de l’écran, puisque celui-ci peut avoir une densite de pixels (ppi) variable.</p>
<p>En fonction de tes paramètres système tu auras donc un ratio changeant (tu peux d’ailleurs joué avec en changeant le zoom dans ton navigateur ou en changeant les paramètres d’affichage de ton système).</p>
<p>Le ratio entre 4k et 1080 est de 4 (4k a deux fois plus de pixels dans chaque direction par rapport à un écran Full-HD de même dimensions, soit 4 fois plus au total). </p>
<p>Ton 1024 est ici un nombre arbitraire hérité des anciens écrans 4:3, là où les dimensions actuelles sur <em>desktop</em> sont plutôt en 16:9. D’où ton ratio qui n’est pas "<em>rond</em>".</p>
<hr>
<p>Par contre <strong>attention avec l’affichage desktop sur mobile</strong> : ça crée une expérience qui peut souvent dérouter l’utilisateur puisque tu affiches au final des zones réactives beaucoup trop petite et force potentiellement les gens à zoomer/dézoomer plus que nécessaire. Au-delà de l’aspect accessibilité, ça crée pas mal de frictions pour tout le monde.</p>
<p>Si tu veux fournir une expérience de qualité il faudra sans doute te tourner vers les <em>media queries</em> pour adapter ton design à différents formats.</p>forcer le desktop mode sur un smartphone, message #2453572022-09-13T15:19:10+02:00tsuruba/@tsurubahttps://zestedesavoir.com/forums/sujet/16468/forcer-le-desktop-mode-sur-un-smartphone/?page=1#p245357<p>Bonjour,</p>
<p>j’ai fait un site pour des amis d’une association locale. Comme la diffusion est réduite, les problèmes que j’ai créés sur mon site ne sont pas "graves" (c’est pas le site d’une multinationale, quoi) Il n’y a donc aucun besoin urgent, mais ça m’ennuie moi personnellement, alors je creuse un peu. <img src="/static/smileys/svg/hihi.svg" alt="^^" class="smiley">
le problème est de ma faute : J’ai fait le site sur un PC, en le pensant pour afficher sur un PC, et franchement nikel. Mais si on passe sur mobile… beurk beurk beurk ! Le site rend quand même bien si je coche dans le navigateur "version pour ordinateur". Ou disons que c’est moins pire, que tout reste lisible, et que le texte ne sors pas des cadres. <img src="/static/smileys/svg/hihi.svg" alt="^^" class="smiley">
J’ai donc cherché un moyen de forcer cette affichage en version mobile. Stack Overflow m’a donné la réponse : remplacer</p>
<div class="hljs-code-div hljs-code-html"><pre><code class="hljs language-html"><span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span>></span>
</code></pre></div>
<p>par</p>
<div class="hljs-code-div hljs-code-html"><pre><code class="hljs language-html"><span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=1024"</span>></span>
</code></pre></div>
<p>J’ai bien le résultat escompté, mais je ne le comprends pas, et la doc de Mozila ne m’aide pas. Qui est 1024 ? Pourquoi 1024 ? Quelle est l’unité de 1024 ? Mozila dit des pixels, mais mon smartphone a 1440 pixels de long, mon PC de développement 1920, et mon PC fixe 3840 : it works heaventhly, donc je suis perplexe. Même l’explication de "Un pixel n’est pas un pixel" me laisse bof bof car pour l’écran 4K, on a quand même un rapport 3.75 avec les 1024 pixels.</p>
<p>Pouvez-vous m’expliquer ce que j’ai fait exactement ? merci. <img src="/static/smileys/svg/smile.svg" alt=":)" class="smiley"></p>
<p>edit : Je pourrai demander sur stack overflow directement, mais pas envie de up un sujet de 7 ans, et j’aime la baguette et le fromage. <img src="/static/smileys/svg/1f60d.svg" alt="<3" class="smiley"></p>Maintenir la structure du forum plus longtemps sur écran moins large, message #1952602018-12-19T19:29:59+01:00anonyme/@anonymehttps://zestedesavoir.com/forums/sujet/11787/maintenir-la-structure-du-forum-plus-longtemps-sur-ecran-moins-large/?page=1#p195260<p>Je vais enlever les signatures et essayer de mieux intégrer l’avatar (sans qu’il fasse concurrence au message).</p>Maintenir la structure du forum plus longtemps sur écran moins large, message #1951762018-12-18T15:21:20+01:00Jacen/@Jacenhttps://zestedesavoir.com/forums/sujet/11787/maintenir-la-structure-du-forum-plus-longtemps-sur-ecran-moins-large/?page=1#p195176<p>Sur petit écran, je m’attends à voir le maximum de lisibilité possible, en gardant les espaces permettant la délimitation logique des messages. Du coup, la solution actuelle, qui supprime la sidebar, les avatars et les signatures, ça me semble très bien. Dans une taille intermédiaire, j’aurais tendance à supprimer les avatars avant la sidebar, pour garder ce qui est utile à la navigation.</p>Maintenir la structure du forum plus longtemps sur écran moins large, message #1951742018-12-18T14:52:51+01:00anonyme/@anonymehttps://zestedesavoir.com/forums/sujet/11787/maintenir-la-structure-du-forum-plus-longtemps-sur-ecran-moins-large/?page=1#p195174<p>Maintenir l’avatar n’est pas vraiment la finalité de cette suggestion donc on fera "sans avatar" ou incruster l’avatar sur le dessus du message un peu comme "Auteur du sujet".</p>Maintenir la structure du forum plus longtemps sur écran moins large, message #1951722018-12-18T13:46:50+01:00anonyme/@anonymehttps://zestedesavoir.com/forums/sujet/11787/maintenir-la-structure-du-forum-plus-longtemps-sur-ecran-moins-large/?page=1#p195172<p>Je pense que l’on peut améliorer le design sur les petits écrans, mais je ne pense pas que manger de la largeur soit une solution. Quand je suis sur mon téléphone, c’est avant tout pour lire ce qui est écrit, et avoir moins d’espace dédié au texte qu’actuellement ne me serait pas plaisant.</p>
<p>Trouver une façon d’avoir les boutons et l’avatar, oui, pourquoi pas, mais pas sur la largeur.</p>Maintenir la structure du forum plus longtemps sur écran moins large, message #1951612018-12-18T10:19:30+01:00anonyme/@anonymehttps://zestedesavoir.com/forums/sujet/11787/maintenir-la-structure-du-forum-plus-longtemps-sur-ecran-moins-large/?page=1#p195161<p>Bonjour,</p>
<p>Je vous propose de modifier le responsive design pour que le forum est un état normal jusqu’à 500px, voir 420px en cachant l’avatar.</p>
<p>L’idée est : de rajouter tous les boutons présents dans la sidebar sur la page ; de maintenir l’avatar plus longtemps ; garder la signature plus longtemps ; rendre la sidebar un peu moins indispensable pour faciliter la navigation.</p>
<p>Ca devrait ressembler à ça : </p>
<h3 id="comportement-des-petits-écrans">Comportement des petits écrans :<a aria-hidden="true" href="#comportement-des-petits-écrans"><span class="icon icon-link"></span></a></h3>
<h4 id="avec-avatar">Avec avatar :<a aria-hidden="true" href="#avec-avatar"><span class="icon icon-link"></span></a></h4>
<p><img src="https://i.imgur.com/RXhXRjL.png"></p>
<h4 id="sans-avatar">Sans avatar :<a aria-hidden="true" href="#sans-avatar"><span class="icon icon-link"></span></a></h4>
<p><img src="https://i.imgur.com/KB4iWEL.png"></p>
<h3 id="comportement-écran-mi-large-lorsque-la-sidebar-est-masqué">Comportement écran "mi-large" lorsque la sidebar est masqué<a aria-hidden="true" href="#comportement-écran-mi-large-lorsque-la-sidebar-est-masqué"><span class="icon icon-link"></span></a></h3>
<p><img src="https://i.imgur.com/n4IbsbG.png"></p>
<p><em>J’ai oublié de mettre <a href="https://i.imgur.com/8yBdj3m.png">le bandeau : retour & nouveau sujet</a> à la fin.</em></p>
<div class="custom-block custom-block-information"><div class="custom-block-body"><p>J’ai oublié d’afficher le "marquer comme résolu" quand il n’est pas coché il est gris-vert puis s’il est coché il devient vert. Il faudra lui mettre un effet "hover" pour faire comprendre à l’internaute que c’est un bouton. <img src="/static/smileys/smile.png" alt=":)" class="smiley"> <a href="https://i.imgur.com/Li5fkvM.png">Quelque chose comme ça</a>.</p></div></div>
<div class="custom-block custom-block-question"><div class="custom-block-body"><p><strong>EDIT :</strong></p><p>Pour la dernière maquette je ne sais pas quelle header mettre. :/ Celui sur l’image ou :<br>
<img src="https://i.imgur.com/vS5bZcL.png"></p><p>Car sur l’image ci dessous on n’a pas accès à la sidebar et donc pas assez au message suivi. A moins de rajouter seulement le bouton pour ouvrir la sidebar.</p></div></div>
<hr>
<p>Code HTML si vous voulez essayer chez vous :</p>
<div class="custom-block custom-block-spoiler"><div class="custom-block-body"><div class="hljs-code-div"><div class="hljs-line-numbers"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div><pre><code class="hljs language-html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-left: 80px;"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="css">
<span class="hljs-selector-class">.alert-box</span><span class="hljs-selector-class">.info</span>, <span class="hljs-selector-class">.alert-box</span><span class="hljs-selector-class">.success</span> { <span class="hljs-comment">/* Marquer comme résolu */</span>
<span class="hljs-attribute">background</span>: <span class="hljs-number">#6c7e5e</span>;
}
<span class="hljs-selector-class">.pagination</span> <span class="hljs-selector-class">.next</span> ~ <span class="hljs-selector-class">.next</span> {
<span class="hljs-attribute">margin-left</span>: <span class="hljs-number">0</span>;
}
<span class="hljs-selector-class">.pagination</span> <span class="hljs-selector-class">.next</span> {
<span class="hljs-attribute">margin-left</span>: auto;
}
<span class="hljs-selector-class">.sidebar</span><span class="hljs-selector-class">.mobile-menu-hide</span> {
<span class="hljs-attribute">display</span>:none;
}
<span class="hljs-selector-class">.topic-message</span> <span class="hljs-selector-class">.message</span> <span class="hljs-selector-class">.message-actions</span> <span class="hljs-selector-tag">a</span> {
<span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>;
<span class="hljs-attribute">text-indent</span>: -<span class="hljs-number">9999px</span>;
}
<span class="hljs-selector-class">.content-wrapper</span>, <span class="hljs-selector-class">.full-content-wrapper</span> {
<span class="hljs-attribute">margin-left</span>: <span class="hljs-number">2rem</span>;
<span class="hljs-attribute">width</span>: <span class="hljs-built_in">calc</span>(100% - 4rem);
}
</span><span class="hljs-tag"></<span class="hljs-name">style</span>></span>
<span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination pagination- pagination-chapter"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"prev"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ico-after arrow-left"</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"prev"</span>></span>Retour à la liste des sujets<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"prev"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ico-after star yellow"</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"prev"</span>></span>Ne plus suivre ce sujet (2 abonnés)<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"prev"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ico-after email"</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"prev"</span>></span>Être notifié par courriel<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"next"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ico-after more"</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"prev"</span>></span>Nouveau sujet<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">itemprop</span>=<span class="hljs-string">"name"</span>></span>Comment faire une todolist pour git ?<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
<span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"subtitle"</span> <span class="hljs-attr">itemprop</span>=<span class="hljs-string">"description"</span>></span>Marquer des issues "à faire"<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-left: 80px;"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination pagination- pagination-chapter"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"prev"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ico-after star yellow"</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"prev"</span>></span>Ne plus suivre ce sujet (2 abonnés)<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"prev"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ico-after email"</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"prev"</span>></span>Être notifié par courriel<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
<span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination pagination- pagination-chapter"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"background:#f0f0f0"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"prev"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ico-after lock"</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"prev"</span>></span>Fermer le sujet<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"prev"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ico-after pin"</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"prev"</span>></span>Marquer en post-it<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"next"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ico-after star"</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"prev"</span>></span>Ajouter en une<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"next"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ico-after arrow-right"</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"prev"</span>></span>Déplacer le sujet<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</code></pre></div></div></div>
<p>Doit-on améliorer le responsive design ?</p>
<ul>
<li>+1 Oui</li>
<li>-1 Non</li>
</ul>
<p>A,</p>
<p>Bon vol.</p>
<p>NB : <a href="https://imgur.com/a/nXajzIO">Album imgur</a></p>