El navegador no escala por debajo de 400px?

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?

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.

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.

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.

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

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.

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.

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

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

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:

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

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:

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

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

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

Encontré una solución rápida para esto.

Simplemente instale el complemento Responsive Web Design en Chrome, y se abrirá una ventana separada sin la barra de direcciones y pestañas, que se puede reducir a 10 px o menos.

Enlace aquí: https://chrome.google.com/webstore/detail/responsive-web-design-tes/bdpelkpfhjfiacjeobkhlkkgaphbobea/related

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.

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.

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/

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

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/

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.