html - keywords - El navegador no se escala por debajo de 400px?
meta tags generator (12)
Estoy trabajando en armar una hoja de estilo líquida y funciona maravilloso. Una cosa que noté es que la ventana de mi navegador en Chrome no cambiará de tamaño a menos de 400px, simplemente se queda atascada allí y en FF, cuando lo reduzco, simplemente se detiene a unos 400px y luego aparece una barra de desplazamiento horizontal.
Cuando abro el sitio en mi teléfono se ve perfecto a alrededor de 320px, así que sé que escala a menos de 400px.
Tenía curiosidad si alguien supiera si esto era una cosa del navegador / escritorio o si debería mirar algo que no sea mi CSS. No tengo ninguna declaración de min-width, así que no estoy seguro de qué podría estar causando esto.
De nuevo en el escritorio, se reduce a un ancho mínimo de aproximadamente 400px 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 320px ... curioso por qué al menos ganó Reduzca a 320px en el escritorio.
-edit- Tampoco estoy seguro de si esto importa, pero Opera le permite escalar casi a nada ... Entonces funciona con Opera y no con Chrome o FF ... ¿alguna idea?
Agregando a lo que dijeron nayan9 y drinkdecaf, puedes simplemente lanzar document.URL en la llamada a window.open para ver la página que estás viendo actualmente en la ventana 320. Es posible que desee agregar algo más al ancho si está esperando una barra de desplazamiento.
javascript:(function(){window.open(document.URL, '''',''width=320,height=480'');})();
En caso de que quiera reducir el ancho de su pantalla para emular diferentes dispositivos (¿y por qué otra razón querría hacer esto?):
Chrome ahora tiene una sección de Emulación en su inspector, que se activa al hacer clic en el pequeño ícono de teléfono en la barra de menú superior (entre la lupa y los Elementos):
El modo de emulación le permite configurar el tamaño de la ventana gráfica para todos los tamaños comunes de pantalla móvil, entre otras características agradables, como emular el toque, la geolocalización e incluso la entrada del acelerómetro:
La solución de nayan9 funciona muy bien, y se puede poner en un marcador sin tener que crear un archivo html. En Chrome, crea 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 copiar esto en su barra de direcciones no funcionará: Chrome elimina el "javascript:".
Me gusta esta herramienta porque te permite cambiar rápidamente y también cambiar entre vertical / horizontal fácilmente para tamaños móviles. También le permite hacer una marca de marcador personalizada, por lo que si diseña con frecuencia resoluciones poco claras, puede guardarlas y usarlas.
Tuve que usar una de estas herramientas porque incluso con la respuesta anterior no pude hacer que mi ventana escalara correctamente a 320, esta herramienta parece ser una solución más rápida en general.
Muchos teléfonos inteligentes escalan la página para adaptarla al tamaño de su pantalla usando el zoom. Su ancho mínimo de página es probablemente 400px. Sin ningún código de ejemplo, creo que es todo lo que se puede decir.
Otra solución fácil es hacer clic en Strg + Shift + N para ingresar al modo incógnito. Allí puede cambiar el tamaño de la ventana del navegador a su gusto.
Siempre me encuentro con este problema con pestañas ancladas. ¡Chrome no cambiará de tamaño por debajo de un ancho horizontal de ocho pestañas fijas visibles si hay alguna! Simplemente separe la pestaña que quiere cambiar de tamaño para resolver esto ...
Soy flojo, para hacerlo aún más fácil, deje que el marcador pregunte al usuario por 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);})()
También me quedé 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 redimensionarla libremente a 111x80.
en Chrome los iconos de sus complementos en la esquina superior derecha causan el problema
-> cambie el tamaño de la barra de direcciones (donde escribe las URL) al ancho máximo (arrastre la barra en el borde derecho hacia la derecha)
o deshabilitar los iconos
esto puede deberse a los complementos que instaló en su navegador. elimine u oculte todos los íconos de complementos de la barra de herramientas y pruebe 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 puedes cambiar el tamaño de la barra de direcciones y ocultará los complementos automáticamente.
Chrome no puede cambiar el tamaño horizontalmente por debajo de 400px (OS X) o 218px (Windows), pero tengo una solución realmente simple al problema:
- Acople el inspector web a la derecha en lugar de a la parte inferior
- Cambiar el tamaño del panel de inspectores : 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á conectado 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. Esto me ha permitido pasar completamente de Firefox / Firebug a Chrome.
Si desea dar un paso más, consulte la configuración del inspector web (icono del engranaje, abajo a la derecha) y vaya a la pestaña del agente de usuario . Puede configurar la resolución de pantalla a lo que quiera aquí e incluso alternar rápidamente entre vertical y horizontal.
ACTUALIZAR : Aquí hay otra herramienta realmente genial que he encontrado. http://lab.maltewassermann.com/viewport-resizer/