Le navigateur ne s'adapte pas à moins de 400 pixels?

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 dans Chrome ne se redimensionnera pas en dessous de 400px, elle restera simplement bloquée là-bas et dans FF lorsque je la réduis, elle s'arrête à environ 400px, puis affiche une barre de défilement horizontale.

Lorsque j'ouvre le site sur mon téléphone, il semble parfait à environ 320 pixels, donc je sais qu'il est à une échelle 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éclarations de largeur minimale, donc je ne suis pas sûr de ce qui pourrait en être la cause.

Encore une fois sur le bureau, il diminue jusqu'à une largeur minimale 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é ne réduisez pas à 320px sur le bureau.

-edit- De plus, je ne sais pas si cela compte, mais Opera lui permet de réduire à peu près rien ... Donc, cela fonctionne avec Opera et pas dans Chrome ou FF ... des idées?

Chrome ne peut pas redimensionner horizontalement en dessous de 400px (OS X) ou 218px (Windows) mais j'ai une solution très simple au problème:

1. Ancrer l'inspecteur Web vers la droite plutôt que vers le bas
2. Redimensionner le panneau de l'inspecteur - vous pouvez maintenant rendre la zone du navigateur vraiment petite (jusqu'à 0 px)

Mise à jour: Chrome vous permet désormais d'organiser les fenêtres de l'inspecteur verticalement lorsqu'elles sont ancrées à droite! Cela améliore vraiment la mise en page.

Les panneaux HTML et CSS s'adaptent très bien et vous ouvrez même un petit panneau de console également. Cela m'a permis de passer complètement de Firefox / Firebug à Chrome.

Si vous souhaitez aller plus loin, consultez les paramètres de l'inspecteur Web (icône de roue dentée, en bas à droite) et accédez à l' onglet agent utilisateur . Vous pouvez régler la résolution de l'écran sur ce que vous voulez ici 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 icônes d'addon de la barre d'outils et essayez de redimensionner. 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'adresse et elle masquera automatiquement les addons.

J'étais également perplexe, mais je me suis retrouvé avec 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 n'a que la barre d'adresse et Chrome me permet de la 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 favori avec une URL:

javascript:(function(){window.open('ANY_URL', '','width=320,height=480');})();

Et donnez-lui un nom "Open Small Window" ou quelque chose de similaire. Cela vous permettra d'ouvrir facilement les fenêtres sans restrictions de taille dans Chrome. Notez que le simple fait de le copier 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 voudriez-vous faire cela?):

Chrome a maintenant une section d'émulation dans son inspecteur, activée en cliquant sur la petite icône de téléphone dans la barre de menu supérieure (entre la loupe et Elements):

Le mode d'émulation vous permet de définir la taille de la fenêtre sur toutes les tailles d'écran mobiles courantes, entre autres fonctionnalités intéressantes, comme l'émulation tactile, la géolocalisation et même l'entrée d'accéléromètre:

En plus de 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 ajouter plus à la largeur si vous attendez une barre de défilement.

javascript:(function(){window.open(document.URL, '','width=320,height=480');})();

Les DevTools dans Chrome ont considérablement évolué depuis la publication de la plupart de ces réponses. La meilleure façon de résoudre ce problème maintenant est d'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 entre Device Toolbar:

Cela vous permettra ensuite d'émuler le périphérique mobile ou la taille de la fenêtre d'affichage que vous souhaitez.

dans chrome, les icônes de vos addons dans le coin supérieur droit causent le problème

-> redimensionner la barre d'adresse (où vous tapez les urls) à la largeur maximale (faites glisser la barre au bord droit vers la droite)

ou désactiver les icônes

Je suis paresseux, pour rendre les choses encore plus faciles, laissez le bookmarklet demander à l'utilisateur les tailles :-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);})()

J'ai trouvé une solution de contournement rapide pour cela.

Installez simplement le module complémentaire Responsive Web Design sur Chrome, et il ouvrira une fenêtre séparée sans la barre d'adresse et les onglets, qui peuvent être réduits à 10 px ou moins.

Lien ici: https://chrome.google.com/webstore/detail/responsive-web-design-tes/bdpelkpfhjfiacjeobkhlkkgaphbobea/related

J'ai rencontré des problèmes similaires et je viens de trouver un bon travail. Ouvrez vos outils de développement Chrome et en haut à gauche, il y a un petit écran et une icône iPad. Cliquez dessus et cela ouvre une vue mobile de votre page. Vous pouvez le définir sur des périphériques prédéfinis ou une résolution personnalisée. Assez chouette en fait.

Une autre solution simple consiste à cliquer sur Strg + Shift + N pour passer en mode navigation privée. Là, vous pouvez redimensionner la fenêtre de votre 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é, 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 mettre ma fenêtre à l'échelle correctement à 320, cet outil semble être une solution plus rapide dans l'ensemble.

http://lab.maltewassermann.com/viewport-resizer/

Je rencontre toujours ce problème avec les onglets épinglés. Chrome ne sera pas redimensionné en dessous d'une largeur horizontale de huit onglets épinglés visibles s'il y en a! Détachez simplement l'onglet que vous souhaitez redimensionner pour résoudre ce problème ...

C'est ma première contribution à la communauté stackoverflow et c'est mon effort pour redonner à toutes les personnes merveilleuses qui ont fait d'Internet un outil si puissant. Maintenant, pour répondre: Safari, a cette fonctionnalité intéressante. Vous devez activer l'option de développeur Safari dans les préférences. Capture d'écran de la configuration des préférences dans Safari pour activer le menu développeur

Une fois activé, vous pouvez accéder à un tas d'outils de développement très puissants. L'un de ces outils est l'ajustement de la fenêtre d'affichage qui peut être utilisé pour tester la mise en page réactive de votre site Web. Pour activer les tests de mise en page réactifs, on peut utiliser le raccourci Cmd + ctr + R pour activer l'option de réglage du port de vue safari. Cela vous donnera suffisamment de contrôle pour tester votre site Web sur différentes tailles de port d'affichage.

Capture d'écran de l'apparence de la fenêtre de votre navigateur une fois que l'option de test de mise en page réactive est activée.

1. Lien vers comment activer le menu développeur dans safari: https://coolestguidesontheplanet.com/safari-web-developer-tools-show-dock-browser-window/

De nombreux téléphones intelligents adaptent la page à la taille de leur écran à l'aide du zoom. Votre largeur de page minimale est probablement de 400 pixels. Sans aucun exemple de code, je pense que c'est tout ce que l'on peut dire.