O navegador não escala abaixo de 400 px?

Estou trabalhando na montagem de uma folha de estilo líquida e funciona maravilhosamente. Uma coisa que eu notei é que a janela do meu navegador no Chrome não redimensiona abaixo de 400px, ela fica presa lá e, no FF, à medida que diminuo a escala, ela para em torno de 400px e abre uma barra de rolagem horizontal.

Quando abro o site no meu telefone, ele fica perfeito em torno de 320px, então eu sei que ele tem uma escala menor que 400px.

Fiquei curioso se alguém soubesse se isso era uma coisa de navegador / desktop ou se eu deveria estar olhando algo diferente do meu CSS. Eu não tenho nenhuma declaração de largura mínima, então não tenho certeza do que poderia estar causando isso.

Novamente na área de trabalho, ele diminui para uma largura mínima de cerca de 400 pixels e para, mas quando eu o abro no telefone, ele se reduz ao tamanho da tela do telefone, que é de aproximadamente 320 pixels ... curioso por que, no mínimo, ganhou reduza para 320px na área de trabalho.

-edit- Também não tenho certeza se isso importa, mas o Opera permite que ele diminua para praticamente nada ... Portanto, ele funciona com o Opera e não no Chrome ou FF ... alguma idéia?

O Chrome não pode ser redimensionado horizontalmente abaixo de 400 px (OS X) ou 218 px (Windows), mas tenho uma solução realmente simples para o problema:

1. Encaixe o inspetor da Web à direita e não na parte inferior
2. Redimensione o painel do inspetor - agora você pode tornar a área do navegador muito pequena (até 0px)

Atualização: o Chrome agora permite organizar as janelas do inspetor verticalmente quando encaixadas à direita! Isso realmente melhora o layout.

Os painéis HTML e CSS se encaixam muito bem e você também abre um pequeno painel de console. Isso me permitiu mudar completamente do Firefox / Firebug para o Chrome.

Se você quiser dar um passo adiante, examine as configurações do inspetor da web (ícone de engrenagem, canto inferior direito) e vá para a guia do agente do usuário . Você pode definir a resolução da tela como desejar aqui e alternar rapidamente entre retrato e paisagem.

UPDATE : Aqui está outra ferramenta muito legal que eu já encontrei. http://lab.maltewassermann.com/viewport-resizer/

isso pode ser devido aos complementos que você instalou no seu navegador. remova ou oculte todos os ícones adicionais da barra de ferramentas e tente redimensionar. quando houver navegador de complementos, redimensione apenas a barra de endereço e mantenha os complementos visíveis.

Atualização: 14/07/2013

Com a versão mais recente do chrome, agora você pode redimensionar a barra de endereço e ela ocultará os complementos automaticamente.

Também fiquei perplexo, mas acabei com uma solução simples. Acabei de criar um arquivo HTML com um link para abrir uma nova janela:

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

Essa nova janela não tem nada além da barra de endereços e o Chrome permite redimensionar livremente para 111x80.

A solução de nayan9 funciona muito bem e pode ser colocada em um marcador sem a necessidade de criar um arquivo html. No Chrome, crie um novo marcador com URL:

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

E dê um nome de "Abrir janela pequena" ou algo semelhante. Isso permitirá que você abra facilmente janelas sem restrições de tamanho no chrome. Observe que copiar isso na barra de endereço não funcionará - o chrome retira o "javascript:".

Caso você queira reduzir a largura da tela para emular dispositivos diferentes (e por que mais você faria isso?):

O Chrome agora possui uma seção Emulação em seu inspetor, ativada clicando no pequeno ícone de telefone na barra de menus superior (entre a lupa e o Elements):

O modo de emulação permite que você defina o tamanho da janela de exibição para todos os tamanhos comuns de tela móvel, entre outros recursos interessantes, como emulação de toque, localização geográfica e até entrada de acelerômetro:

Adicionando o que nayan9 e drinkdecaf disseram, você pode simplesmente jogar document.URL na chamada para window.open para ver a página que está sendo exibida atualmente na janela 320. Você pode adicionar um pouco mais à largura se estiver esperando uma barra de rolagem.

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

O DevTools no Chrome passou substancialmente a partir do momento em que a maioria dessas respostas foi publicada. A melhor maneira de resolver esse problema agora é usar os emuladores criados no Chrome.

Para usar os emuladores, abra o DevTools (pressione F12) e clique no ícone a seguir para alternar entre Device Toolbar:

Isso permitirá que você emule o tamanho do dispositivo móvel ou da porta de visualização que desejar.

no chrome, os ícones dos seus addons no canto superior direito causam o problema

-> redimensione a barra de endereço (onde você digita os URLs) para a largura máxima (arraste a barra na borda direita para a direita)

ou desativar os ícones

Sou preguiçoso, para facilitar ainda mais, deixe o bookmarklet solicitar ao usuário tamanhos :-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);})()

Encontrei uma solução rápida para isso.

Basta instalar o complemento Responsive Web Design no Chrome e ele abrirá uma janela separada sem a barra de endereços e as guias, que podem ser reduzidas para 10 px ou menos.

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

Estou enfrentando problemas semelhantes e acabei de encontrar um bom trabalho. Abra as ferramentas do Chrome e, no canto superior esquerdo, há um pequeno ícone de tela e ipad. Clique nele e ele abre uma visualização móvel da sua página. Você pode configurá-lo para dispositivos predefinidos ou uma resolução personalizada. Muito bacana, na verdade.

Outra solução fácil é clicar em Strg + Shift + N para entrar no modo de navegação anônima. Lá, você pode redimensionar a janela do navegador conforme desejar.

Eu gosto desta ferramenta porque permite alternar rapidamente e também alterna entre retrato / horizontal facilmente para tamanhos móveis. Ele também permite que você deixe um marcador personalizado, portanto, se você criar resoluções obscuras com frequência, poderá salvá-las e usá-las.

Eu tive que usar uma dessas ferramentas porque, mesmo com a resposta acima, não era possível escalar minha janela para 320 adequadamente, essa ferramenta parece ser uma solução mais rápida em geral.

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

Estou sempre enfrentando esse problema com as guias fixadas. O Chrome não será redimensionado abaixo de uma largura horizontal de oito guias visíveis, se houver alguma! Apenas desanexe a guia que deseja redimensionar para resolver isso ...

Esta é minha primeira contribuição para a comunidade stackoverflow e é meu esforço para retribuir a todas as pessoas maravilhosas que fizeram da internet uma ferramenta tão poderosa. Agora, anser: Safari, tem esse recurso interessante. Você precisa ativar a opção desenvolvedor safari nas preferências. Captura de tela da configuração de preferências no Safari para ativar o menu do desenvolvedor

Uma vez ativado, você pode acessar várias ferramentas de desenvolvedor muito poderosas. Uma dessas ferramentas é o ajuste da viewport, que pode ser usado para testar o layout responsivo do site. Para ativar o teste de layout responsivo, é possível usar o atalho Cmd + ctr + R para ativar a opção de ajuste da porta de visualização do safari. Isso lhe dará controle suficiente para testar seu site em vários tamanhos de porta de exibição.

Captura de tela da aparência da janela do navegador assim que a opção de teste de layout responsivo for ativada.

1. Link para como ativar o menu do desenvolvedor no safari: https://coolestguidesontheplanet.com/safari-web-developer-tools-show-dock-browser-window/

Muitos smartphones dimensionam a página para caber no tamanho da tela usando o zoom. A largura mínima da página é provavelmente de 400 pixels. Sem nenhum código de exemplo, acho que é tudo o que pode ser dito.