El navegador no escala por debajo de 400px?


151

Estoy trabajando en armar una hoja de estilo líquida y funciona de maravilla. Una cosa que he notado es que la ventana de mi navegador en Chrome no cambiará de tamaño por debajo de 400px, simplemente se queda atascado allí y en FF a medida que la reduzco, se detiene a alrededor de 400px y luego aparece una barra de desplazamiento horizontal.

Cuando abro el sitio en mi teléfono, se ve perfecto a alrededor de 320 px, así que sé que escala menos de 400 px.

Tenía curiosidad por saber si alguien sabía si esto era un navegador / escritorio o si debería estar mirando algo más que mi CSS. No tengo ninguna declaración de ancho mínimo, así que no estoy seguro de qué podría estar causando esto.

Nuevamente en el escritorio, se reduce a un ancho mínimo de aproximadamente 400 px y se detiene, pero cuando lo abro en mi teléfono se escala al tamaño de la pantalla del teléfono, que es aproximadamente 320 px ... curioso por qué al menos ganó No se reduzca a 320 px en el escritorio.

-editar- Además, no estoy seguro de si esto es importante, pero Opera permite reducirlo a casi nada ... Así que funciona con Opera y no en Chrome o FF ... ¿alguna idea?


1
Recuerdo que Chrome solía ser plegable a un pequeño ladrillo. Así que esto es algo que se introdujo a propósito. En Chrome actual, veo que la ventana solo será tan pequeña como la fila superior de iconos. Ocultar el botón de inicio o los íconos de extensión me permite hacerlo un poco más pequeño.
mrtsherman

77
Esto va a ser algo específico sobre su CSS y marcado. Sin nada que revisar, no hay duda. Disparar conjeturas en la oscuridad no es realmente un enfoque útil. En ese caso, deberá depurar por su cuenta.
Jared Farrish

3
Sí, estoy bastante seguro de que es solo el ancho mínimo literal de la ventana del navegador, al igual que la mayoría de los programas tienen un ancho mínimo al que se le puede cambiar el tamaño. Parece que mi Chrome no puede cambiar el tamaño más pequeño que una ventana gráfica de 250px.
justisb

1
Chrome 33 lo ha vuelto a configurar a 400 px
Sparkup

44
"Esto va a ser algo específico sobre su CSS y marcado" ... Ehm no, en realidad no lo era.
Stijn de Witt

Respuestas:


253

Chrome no puede cambiar el tamaño horizontalmente por debajo de 400px (OS X) o 218px (Windows) pero tengo una solución muy simple para el problema:

  1. Acople el inspector web a la derecha en lugar de a la parte inferior
  2. Cambiar el tamaño del panel del inspector : ahora puede hacer que el área del navegador sea realmente pequeña (hasta 0px)

Actualización: ¡ Chrome ahora le permite organizar las ventanas del inspector verticalmente cuando está acoplado a la derecha! Esto realmente mejora el diseño.

configuración de diseño de panel vertical

Los paneles HTML y CSS se ajustan muy bien e incluso se abre un pequeño panel de consola también. Esto me ha permitido pasar completamente de Firefox / Firebug a Chrome.

Inspector atracado a la derecha con diseño de panel vertical

Si desea ir un paso más allá, mire la configuración del inspector web (icono de engranaje, abajo a la derecha) y vaya a la pestaña de agente de usuario . Puede configurar la resolución de pantalla a lo que quiera aquí e incluso alternar rápidamente entre vertical y horizontal.

Configuraciones de resolución del dispositivo

ACTUALIZACIÓN : Aquí hay otra herramienta realmente genial que he encontrado. http://lab.maltewassermann.com/viewport-resizer/


1
+1 El inspector es ideal para esto, incluso permite configurar el agente de usuario, etc.
GDmac

2
Tu eres el hombre. Y es aún más simple depurar la pantalla pequeña, cuando hay una ventana de inspección grande apropiada.
aebersold

1
Gracias @aebersold Sí, es una buena ventaja tener una gran ventana de inspección al trabajar en diseños móviles.
Oisin Lavery

3
OMI, esta debería ser la respuesta aceptada. La idea es simple y brillante, y su sugerencia sobre la anulación de métricas es increíble. ¡Y también el bookmarklet al que te vinculaste!
marlar

55
¿Alguien más no pudo descubrir cómo acoplar las herramientas de desarrollador a la derecha? stackoverflow.com/questions/10023640/…
Erti-Chris Eelmaa

36

Esto puede deberse a los complementos que instaló en su navegador. elimine u oculte todos los iconos de complementos de la barra de herramientas e intente cambiar el tamaño. cuando hay complementos, el navegador solo cambia el tamaño de la barra de direcciones y mantiene los complementos visibles.

Actualización: 14/07/2013


Con la última versión de Chrome, ahora puede cambiar el tamaño de la barra de direcciones y ocultará los complementos automáticamente.


44
cuando hay complementos, el navegador solo cambia el tamaño al tamaño de la barra de direcciones y mantiene los complementos visibles. Espero que entiendas esto. Este no es un efecto secundario de los complementos. pero cuando hay complementos instalados, el navegador no puede cambiar el tamaño al valor mínimo. debido a los íconos de complementos al lado de la barra de direcciones.
Chamika Sandamal

2
Eliminar todos los íconos de complementos en Chrome no me resolvió esto. La solución de nayan9 lo hizo.
Andrew Shooner

31
Esta no es la respuesta . Incluso con todos los complementos / extensiones deshabilitados, el ancho mínimo de Chrome sigue siendo de 400 px.
Oisin Lavery

44
@ChamikaSandamal no es correcto. El OP está tratando de escalar su ventana por debajo de 400px. Esto es imposible en Chrome porque el navegador tiene un ancho mínimo de 400 px. La única forma de lograr el efecto que busca el OP es la respuesta de Sherpanaut. Su respuesta no hace absolutamente nada más que ayudar al usuario a acercarse al ancho mínimo duro de 400 px, que no es lo que buscaba el OP.
Fred Stevens-Smith

2
@ChamikaSandamal, aunque puede funcionar para usted, no está funcionando para el resto de nosotros. No es nada en tu contra. Es simplemente que esta respuesta no soluciona el problema para muchos de nosotros.
DA.

19

También estaba perplejo, pero terminé con una solución simple. Acabo de crear un archivo HTML con un enlace para abrir una nueva ventana:

<a href="javascript:window.open('your_url_here', '','width=320,height=480')">Open!</a>

Esta nueva ventana no tiene más que la barra de direcciones y Chrome me permite cambiar el tamaño libremente a 111x80.


1
LOL, habla sobre un hack para hacer algo simple
Otto

17

La solución de nayan9 funciona muy bien y se puede poner en un marcador sin tener que crear un archivo html. En Chrome, cree un nuevo marcador con URL:

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

Y asígnele el nombre de "Abrir ventana pequeña" o algo similar. Esto le permitirá abrir fácilmente ventanas sin restricciones de tamaño dentro de Chrome. Tenga en cuenta que simplemente copiar esto en su barra de direcciones no funcionará: Chrome elimina el "javascript:".


Esta es la respuesta que funcionó para mí. Útil para tener Tweetdeck del tamaño más pequeño posible.
Krug

10

En caso de que desee reducir el ancho de su pantalla para emular diferentes dispositivos (y ¿por qué otra razón desea hacer esto?):

Chrome ahora tiene una sección de Emulación en su inspector, que se activa haciendo clic en el pequeño icono del teléfono en la barra de menú superior (entre la lupa y los Elementos):

Icono de emulación de Chrome

El modo de emulación le permite establecer el tamaño de la ventana gráfica en todos los tamaños comunes de pantalla móvil, entre otras características interesantes, como emulación táctil, geolocalización e incluso entrada de acelerómetro:

ingrese la descripción de la imagen aquí


Lo más impresionante es que no conocía esa característica ... finalmente puedo deshacerme del conmutador de agente de usuario y emular correctamente los dispositivos móviles, ¡gracias! 10 a este
andreszs

Esta característica reemplazada por "Toggle Device Toolbar" stackoverflow.com/a/44194243/1175496
The Red Pea

6

Además de lo que dijeron nayan9 y drinkdecaf, puede simplemente lanzar document.URL en la llamada a la ventana. Abra para ver la página que está viendo actualmente en la ventana 320. Es posible que desee agregar algo más al ancho si espera una barra de desplazamiento.

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

3

Las DevTools en Chrome han avanzado sustancialmente desde que se publicaron la mayoría de estas respuestas. La mejor manera de abordar este problema ahora es usar los emuladores integrados en Chrome.

Para usar los emuladores, abra DevTools (presione F12) y luego haga clic en el siguiente icono para alternar Device Toolbar:

El botón devtools

Esto le permitirá emular cualquier dispositivo móvil o tamaño de ventana que desee.


2

en Chrome los iconos de sus complementos en la esquina superior derecha causan el problema

-> cambiar el tamaño de la barra de dirección (donde escribe las URL) al ancho máximo (arrastre la barra en el borde derecho a la derecha)

o deshabilitar los íconos


2

Soy perezoso, para hacerlo aún más fácil, deje que el bookmarklet solicite al usuario los tamaños :-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

He estado experimentando problemas similares y acabo de encontrar una buena solución. Abre tus devtools de Chrome y en la parte superior izquierda, hay una pequeña pantalla e ícono de ipad. Haga clic en eso y se abrirá una vista móvil de su página. Puede configurarlo en dispositivos predefinidos o una resolución personalizada. Bastante ingenioso en realidad.


0

Otra solución fácil es hacer clic en Strg + Shift + N para ingresar al modo de incógnito. Allí puede cambiar el tamaño de la ventana de su navegador a su gusto.


2
En Mac 10.9 Chrome 38.0.2125.104 este no es el caso
geotheory

1
En Linux Chromium 44.0.2403.89 este tampoco es el caso
Ikar Pohorský

En Windows 8 Chrome versión 74.0.3729.131 (versión oficial) (64 bits), este no es el caso
The Red Pea

0

Me gusta esta herramienta porque te permite cambiar rápidamente y también cambia entre vertical / horizontal fácilmente para tamaños móviles. También le permite crear un marcador personalizado, por lo que si diseña para resoluciones oscuras con frecuencia, puede guardarlas y usarlas.

Tuve que usar una de estas herramientas porque incluso con la respuesta anterior no pude hacer que mi ventana se escalara a 320 correctamente, esta herramienta parece ser una solución más rápida en general.

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


0

Siempre me encuentro con este problema con pestañas ancladas. ¡Chrome no cambiará su tamaño por debajo de un ancho horizontal de ocho pestañas ancladas visibles si hay alguna! Simplemente separe la pestaña que desea cambiar de tamaño para resolver esto ...


0

Esta es mi primera contribución a la comunidad stackoverflow y es mi esfuerzo por retribuir a todas las personas maravillosas que han hecho de Internet una herramienta tan poderosa. Ahora para responder: Safari, tiene esta característica genial. Debe activar la opción de desarrollador de safari en las preferencias. Captura de pantalla de la configuración de preferencias en Safari para activar el menú de desarrollador

Una vez activado, puede acceder a un montón de herramientas de desarrollo muy potentes. Una de estas herramientas es el ajuste de Viewport que se puede usar para probar el diseño receptivo de su sitio web. Para activar la prueba de diseño receptivo, se puede usar el atajo Cmd + ctr + R para activar la opción de ajuste de puerto de vista de safari. Esto le dará suficiente control para probar su sitio web en varios tamaños de puertos de vista.

Captura de pantalla de cómo se verá la ventana de su navegador una vez que se active la opción de prueba de diseño receptivo.

  1. Enlace a cómo activar el menú de desarrollador en safari: https://coolestguidesontheplanet.com/safari-web-developer-tools-show-dock-browser-window/

-4

Muchos teléfonos inteligentes escalan la página para que se ajuste al tamaño de su pantalla usando el zoom. Su ancho de página mínimo es probablemente de 400 px. Sin ningún código de ejemplo, creo que eso es todo lo que se puede decir.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.