Le navigateur ne passe pas sous 400px?
Je travaille à mettre au point une feuille de style liquide et ça marche merveilleusement bien. Une chose que j’ai remarquée, c’est que la fenêtre de mon navigateur dans Chrome ne sera pas redimensionnée à moins de 400 pixels, elle rest bloquée et dans FF, elle s’arrête à environ 400 pixels et affiche une barre de défilement horizontale.
Lorsque j’ouvre le site sur mon téléphone, il est parfait à environ 320 pixels, alors je sais que sa taille est inférieure à 400 pixels.
J’étais curieux de savoir si quelqu’un savait s’il s’agissait d’un navigateur / bureau ou si je devais regarder autre chose que mon CSS. Je n’ai pas de déclaration de largeur minimale, alors je ne suis pas sûr de ce qui pourrait causer cela.
Encore une fois, sur un ordinateur de bureau, il est réduit à environ 400 pixels par pouce et s’arrête, mais quand je l’ouvre sur mon téléphone, la taille de l’écran est d’environ 320 pixels. ne réduisez pas le 320px sur le bureau.
- Insérer une image après chaque élément de la liste
- Détection des points de suspension HTML par débordement de texte
- CSS table-cell égale largeur
- Est-ce que CSS peut forcer un saut de ligne après chaque mot dans un élément?
- Requête multimédia sur l’iPhone 5 CSS
-edit- Aussi, je ne suis pas sûr si cela compte, mais Opera lui permet de réduire à peu près rien … Donc, ça marche avec Opera et pas avec Chrome ou FF … des idées?
- Aligner verticalement une image à l’intérieur d’un div avec une hauteur réactive
- : après et: avant les sélecteurs de pseudo-éléments dans Sass
- Comment installer une police personnalisée sur un site HTML
- Comment recadrer et centrer automatiquement une image
- différence entre css height: 100% vs height: auto
Chrome ne peut pas être redimensionné horizontalement au-dessous de 400px (OS X) ou 218px (Windows), mais j’ai une solution très simple au problème:
- Docker l’inspecteur Web vers la droite plutôt que vers le bas
- Redimensionnez le panneau d’inspection – vous pouvez maintenant rendre la zone du navigateur vraiment petite (jusqu’à 0px)
Mise à jour: Chrome vous permet désormais d’organiser les fenêtres de l’inspecteur verticalement lorsque vous êtes ancré à droite! Cela améliore vraiment la mise en page.
Les panneaux HTML et CSS s’adaptent vraiment bien et vous ouvrez même un petit panneau de console. Cela m’a permis de passer complètement de Firefox / Firebug à Chrome.
Si vous souhaitez aller plus loin, consultez les parameters de l’inspecteur Web (icône cog, en bas à droite) et accédez à l’onglet agent utilisateur . Vous pouvez définir la résolution de l’écran comme vous le souhaitez et même basculer rapidement entre portrait et paysage.
MISE À JOUR : Voici un autre outil vraiment cool que j’ai rencontré. http://lab.maltewassermann.com/viewport-resizer/
Cela peut être dû aux addons que vous avez installés sur votre navigateur. Supprimez ou masquez toutes les icons d’addons de la barre d’outils et essayez de les redimensionner. lorsqu’il y a des addons, le navigateur ne redimensionne que la barre d’adresse et garde les addons visibles.
Mise à jour: 14/07/2013
Avec la dernière version de chrome, vous pouvez désormais redimensionner la barre d’adresse et masquer automatiquement les addons.
J’étais aussi déconcerté mais j’ai trouvé une solution simple. Je viens de créer un fichier HTML avec un lien pour ouvrir une nouvelle fenêtre:
Open! Cette nouvelle fenêtre n’a rien d’autre que la barre d’adresse et Chrome me permet de la redimensionner librement à 111×80.
La solution de nayan9 fonctionne très bien et peut être placée dans un signet sans avoir à créer un fichier HTML. Dans Chrome, créez un nouveau signet avec l’URL:
javascript:(function(){window.open('ANY_URL', '','width=320,height=480');})();
Et donnez-lui un nom de “Open Small Window” ou quelque chose de similaire. Cela vous permettra d’ouvrir facilement des fenêtres sans ressortingctions de taille dans chrome. Notez que le simple fait de copier ceci dans votre barre d’adresse ne fonctionnera pas – chrome supprime le “javascript:”.
Si vous souhaitez réduire la largeur de votre écran pour émuler différents appareils (et pourquoi voulez-vous faire autrement?):
Chrome comporte désormais une section Émulation dans son inspecteur, activée en cliquant sur l’icône du petit téléphone dans la barre de menus supérieure (entre la loupe et les éléments):
Le mode d’émulation vous permet de définir la taille de la fenêtre d’affichage sur toutes les tailles d’écran mobiles courantes, parmi d’autres fonctionnalités intéressantes, telles que l’émulation tactile, la géolocalisation et même l’accéléromètre:
En ajoutant à ce que nayan9 et drinkdecaf ont dit, vous pouvez simplement lancer document.URL dans l’appel à window.open pour voir la page que vous consultez actuellement dans la fenêtre 320. Vous voudrez peut-être en append un peu plus à la largeur si vous attendez une barre de défilement.
javascript:(function(){window.open(document.URL, '','width=320,height=480');})();
en chrome les icons de vos addons en haut à droite posent problème
-> redimensionner la barre d’adresse (où vous tapez les URL) à la largeur maximale (faites glisser la barre à droite vers la droite)
ou désactiver les icons
Je suis paresseux, pour le rendre encore plus facile, laissez le bookmarklet demander à l’utilisateur des tailles 😀
javascript: (function() {var width = prompt('Enter window width:', '320');var height = prompt('Enter window height:','480');var url = prompt('Enter window URL');if (url.indexOf(':') < 0) {url = 'http://'+url;} window.open(url, '','width='+width+',height='+height);})()
Une autre solution simple consiste à cliquer sur Strg + Shift + N pour entrer en mode navigation privée. Vous pouvez y redimensionner la fenêtre de votre navigateur comme vous le souhaitez.
J’aime cet outil car il vous permet de changer rapidement et de basculer facilement entre portrait / horizontal pour les tailles mobiles. Il vous permet également de créer un signet personnalisé, donc si vous concevez fréquemment des résolutions obscures, vous pouvez les enregistrer et les utiliser.
J’ai dû utiliser l’un de ces outils car même avec la réponse ci-dessus, je ne pouvais pas faire passer ma fenêtre à 320 correctement, cet outil semble être une solution plus rapide dans l’ensemble.
Je suis toujours confronté à ce problème avec les tabs épinglés. Chrome ne sera pas redimensionné sous une largeur horizontale de huit tabs épinglés visibles s’il y en a! Détachez simplement l’onglet que vous souhaitez redimensionner pour résoudre ce problème …
J’ai trouvé une solution rapide pour cela.
Installez simplement le module complémentaire Web Design Responsive sur Chrome, et il ouvrira une fenêtre distincte sans la barre d’adresse et les tabs, qui peuvent être réduits à 10 px ou moins.
Un grand nombre de smartphones redimensionnent la page pour s’adapter à la taille de leur écran en utilisant le zoom. Votre largeur de page minimale est probablement 400px. Sans exemple de code, je pense que c’est tout ce que l’on peut dire.
- Paramètres optimaux pour l’exportation de fichiers SVG pour le Web à partir d’Illustrator?
- comment désélectionner max-height?
- Positionnement absolu ignorant le remplissage de parent
- Effet de transition CSS rend l’image floue / déplace l’image 1px, dans Chrome?
- Qu’est-ce qu’un «contenu au-dessus du pli» dans Google Pagespeed?
- Comment append une marge à une ligne de tableau
- display: marge supplémentaire du bloc en ligne
- Comment le caractère «supérieur à» ou «>» est-il utilisé dans CSS?
- Dans jQuery, comment puis-je définir les propriétés «top, left» d’un élément avec des valeurs de position relatives au parent et non au document?
- Combiner: après avec: vol stationnaire