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


151

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?


1
Je me souviens que Chrome était pliable en une toute petite brique. C'est donc quelque chose qui a été intentionnellement introduit. Sur Chrome actuel, je vois que cette fenêtre ne deviendra aussi petite que la rangée supérieure d'icônes. Masquer le bouton d'accueil ou les icônes d'extension me permet de le réduire un peu.
mrtsherman

7
Cela va être quelque chose de spécifique sur votre css et votre balisage. Sans rien à revoir, il n'y a aucun doute. Tirer des suppositions dans le noir n'est pas vraiment une approche utile. Dans ce cas, vous devrez déboguer vous-même.
Jared Farrish

3
Oui, je suis à peu près sûr que ce n'est que la largeur minimale littérale de la fenêtre du navigateur, tout comme la plupart des programmes ont une largeur minimale à laquelle il se permet d'être redimensionné. Mon Chrome semble ne pas pouvoir redimensionner plus petit qu'une fenêtre d'affichage de 250 pixels.
justisb

1
Chrome 33 l'a ramené à
400 pixels

4
"Cela va être quelque chose de spécifique à propos de votre css et de votre balisage" ... Non, en fait, ce n'était pas le cas.
Stijn de Witt

Réponses:


253

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.

paramètre de disposition du panneau vertical

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.

Inspecteur ancré à droite avec disposition verticale du panneau

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.

Paramètres de résolution de l'appareil

MISE À JOUR : Voici un autre outil vraiment cool que j'ai rencontré. http://lab.maltewassermann.com/viewport-resizer/


1
+1 L'inspecteur est idéal pour cela, permet même de définir l'agent utilisateur, etc.
GDmac

2
Tu es l'homme. Et c'est encore plus simple de déboguer le petit écran, quand il y a une grande fenêtre d'inspection appropriée.
aebersold

1
Merci @aebersold Oui, c'est un bon bonus d'avoir une belle grande fenêtre Inspecteur lorsque vous travaillez sur des mises en page mobiles.
Oisin Lavery

3
OMI, cela devrait être la réponse acceptée. L'idée est simple et brillante, et votre indice au-dessus du remplacement des métriques est génial. Tout comme le bookmarklet auquel vous avez lié!
marlar du

5
Quelqu'un d'autre ne pouvait pas comprendre comment ancrer les outils de développement à droite? stackoverflow.com/questions/10023640/…
Erti-Chris Eelmaa

36

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.


4
lorsqu'il y a des addons, le navigateur ne redimensionne qu'à la taille de la barre d'adresse et garde les addons visibles. j'espère que vous comprenez cela. ce n'est pas un effet secondaire des addons. mais quand il y a des addons installés, le navigateur ne peut pas redimensionner à la valeur minimale. à cause des icônes d'addon à côté de la barre d'adresse.
Chamika Sandamal

2
La suppression de toutes les icônes d'addon dans Chrome n'a pas résolu ce problème pour moi. La solution de nayan9 l'a fait.
Andrew Shooner

31
Ce n'est pas la réponse . Même avec tous les addons / extensions désactivés, la largeur minimale de Chrome est toujours de 400 px.
Oisin Lavery

4
@ChamikaSandamal ce n'est pas correct. L'OP tente de redimensionner sa fenêtre en dessous de 400px. Ceci est impossible dans Chrome car le navigateur a une largeur minimale de 400 px. La seule façon d'obtenir l'effet recherché par l'OP est la réponse de Sherpanaut. Votre réponse ne fait absolument rien d'autre que d'aider l'utilisateur à se rapprocher de la largeur minimale de 400 px, ce qui n'est pas ce que l'OP recherchait.
Fred Stevens-Smith

2
@ChamikaSandamal bien que cela puisse fonctionner pour vous, cela ne fonctionne pas pour le reste d'entre nous. Ce n'est rien contre toi. C'est simplement que cette réponse ne résout pas le problème pour beaucoup d'entre nous.
DA.

19

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.


1
LOL, parle d'un hack pour faire une chose simple
Otto

17

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:".


C'est la réponse qui a fonctionné pour moi. Utile pour avoir un Tweetdeck aussi petit que possible.
Krug

10

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):

Icône d'émulation Chrome

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:

entrez la description de l'image ici


Plus impressionnant, je ne connaissais pas cette fonctionnalité ... enfin je peux me débarrasser du commutateur utilisateur-agent et émuler correctement les appareils mobiles, merci !! +10 à ceci
andreszs

Cette fonctionnalité a été remplacée par "Toggle Device Toolbar" stackoverflow.com/a/44194243/1175496
The Red Pea

6

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');})();

3

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:

Le bouton devtools

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


2

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


2

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);})()


1

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.


0

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.


2
Sur Mac 10.9 Chrome 38.0.2125.104 ce n'est pas le cas
geotheory

1
Sur Linux Chromium 44.0.2403.89 ce n'est pas non plus le cas
Ikar Pohorský

Sur Windows 8 Chrome Version 74.0.3729.131 (version officielle) (64 bits) ce n'est pas le cas
The Red Pea

0

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/


0

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 ...


0

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/

-4

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.