Le navigateur ne passe pas en dessous de 400px?
Je travaille sur la création d'une feuille de style liquide et cela fonctionne à merveille. Une chose que j'ai remarquée, c'est que la fenêtre de mon navigateur Chrome ne redimensionnera pas au-dessous de 400 pixels, elle restera bloquée. En mode réduit, elle s'arrêtera à environ 400 pixels, puis une barre de défilement horizontale apparaîtra.
Lorsque j'ouvre le site sur mon téléphone, il semble parfait à environ 320 pixels, alors je sais que l'échelle est inférieure à 400 pixels.
J'étais curieux de savoir si quelqu'un savait s'il s'agissait d'un navigateur/d'un ordinateur de bureau ou si je devais regarder autre chose que mon CSS. Je n'ai pas de déclaration min-width, donc je ne suis pas sûr de ce qui pourrait causer cela.
Encore une fois sur le bureau, il réduit à une largeur d'environ 400 pixels et s'arrête, mais lorsque je l'ouvre sur mon téléphone, il s'adapte à la taille de l'écran du téléphone, qui est d'environ 320 pixels ... curieux de savoir pourquoi au moins, il a gagné pas réduire à la 320px sur le bureau.
-edit - Je ne suis pas sûr que ce soit important, mais Opera le permet à peu près rien ... Donc, cela fonctionne avec Opera et pas avec Chrome ou FF ... Des idées?
Chrome ne peut pas redimensionner horizontalement au-dessous de 400px (OS X) ou 218px (Windows) mais j'ai une solution très simple au problème:
- Placez l'inspecteur Web à droite au lieu de bas.
- Redimensionner le panneau d'inspecteur - 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 lorsqu'il est ancré à droite! Cela améliore vraiment la mise en page.
Les panneaux HTML et CSS conviennent parfaitement et vous ouvrez même un petit panneau de console. Cela m’a permis de passer complètement de Firefox/Firebug à Chrome.
Si vous voulez aller plus loin, examinez les paramètres de l'inspecteur web (icône de cog, en bas à droite), puis passez à l'onglet user agent. Vous pouvez définir la résolution de l'écran comme bon vous semble ici et même basculer rapidement entre portrait et paysage.
UPDATE: Voici un autre outil vraiment génial que j'ai rencontré. http://lab.maltewassermann.com/viewport-resizer/
c'est peut-être à cause des addons que vous avez installés sur votre navigateur. supprimez ou masquez toutes les icônes d’addon dans la barre d’outils et essayez d’en redimensionner la taille. quand 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 maintenant redimensionner la barre d’adresses et les masques seront masqués automatiquement.
J'étais aussi perplexe, mais j'ai finalement trouvé une solution simple. Je viens de créer un fichier HTML avec un lien pour ouvrir une nouvelle fenêtre:
<a href="javascript:window.open('your_url_here', '','width=320,height=480')">Open!</a>
Cette nouvelle fenêtre ne contient que la barre d'adresse et Chrome me permet de le redimensionner librement à 111x80.
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 une URL:
javascript:(function(){window.open('ANY_URL', '','width=320,height=480');})();
Et donnez-lui le nom "Open Small Window" ou quelque chose de similaire. Cela vous permettra d’ouvrir facilement des fenêtres sans restrictions 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 périphériques (et pourquoi voudriez-vous le faire?):
Chrome a maintenant une section Émulation dans son inspecteur, activée en cliquant sur la petite icône de téléphone située dans la barre de menus supérieure (entre la loupe et les éléments):
Le mode émulation vous permet de définir la taille de la fenêtre d'affichage pour toutes les tailles d'écran courantes des téléphones mobiles, parmi d'autres fonctionnalités intéressantes, telles que l'émulation tactile, la géolocalisation et même la saisie par accéléromètre:
En ajoutant à ce que nayan9 et drinkdecaf ont dit, vous pouvez simplement insérer document.URL dans l'appel à window.open pour afficher la page en cours d'affichage dans la fenêtre 320. Vous voudrez peut-être ajouter un peu plus à la largeur si vous attendez une barre de défilement.
javascript:(function(){window.open(document.URL, '','width=320,height=480');})();
Je suis paresseux, pour que ce soit encore plus facile, laissez le bookmarklet demander à l'utilisateur les tailles suivantes: - D
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);})()
en chrome les icônes de vos addons dans le coin en haut à droite causent le problème
-> redimensionner la barre d’adresse (où vous tapez les URL) à la largeur maximale (faites glisser la barre à droite Edge à droite)
ou désactiver les icônes
J'ai trouvé une solution rapide pour cela.
Il suffit d'installer le module complémentaire Responsive Web Design dans Chrome pour ouvrir une fenêtre distincte sans la barre d'adresse et les onglets, qui peuvent être réduits à 10 px ou moins.
Une autre solution simple consiste à cliquer sur Strg + Maj + N pour passer en mode de navigation privée. Là, vous pouvez redimensionner votre fenêtre de navigateur comme vous le souhaitez.
J'aime cet outil car il vous permet de basculer rapidement et de basculer facilement entre portrait/horizontal pour les tailles mobiles. Il vous permet également de créer un signet personnalisé. Ainsi, si vous utilisez 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 adapter ma fenêtre à 320 correctement, cet outil semble globalement une solution plus rapide.
Je rencontre toujours ce problème avec des onglets épinglés. Chrome ne sera pas redimensionné en dessous d'une largeur horizontale de huit onglets épinglés visibles s'il en existe! Détachez simplement l'onglet que vous souhaitez redimensionner pour résoudre ce problème ...
Les outils de développement de Chrome ont considérablement évolué depuis la publication de la plupart de ces réponses. Le meilleur moyen de remédier à ce problème consiste à utiliser les émulateurs intégrés à Chrome.
Pour utiliser les émulateurs, ouvrez DevTools (appuyez sur F12) puis cliquez sur l'icône suivante pour basculer le Device Toolbar:
Cela vous permettra ensuite d'émuler quel que soit le périphérique mobile ou la taille de la fenêtre de visualisation que vous souhaitez.