O navegador não escala abaixo de 400 px?

151

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?

Brodie
fonte
1
Lembro que o Chrome costumava ser dobrável em um pequeno tijolo. Então isso é algo que foi propositalmente introduzido. No Chrome atual, vejo que a janela ficará tão pequena quanto a linha superior de ícones. Ocultar o botão home ou os ícones de extensão permite que eu fique um pouco menor.
Mrtsherman
7
Isso será algo específico sobre seu CSS e marcação. Sem nada para revisar, não há dúvida. Dar palpites no escuro não é realmente uma abordagem útil. Nesse caso, você precisará depurar por conta própria.
Jared Farrish
3
Sim, tenho certeza de que essa é apenas a largura mínima literal da janela do navegador, assim como a maioria dos programas tem uma largura mínima que permite redimensionar. Meu Chrome parece não conseguir redimensionar um tamanho menor que uma viewport de 250 pixels.
Just12
1
O Chrome 33 o definiu de volta para 400px
Sparkup
4
"Isso vai ser algo específico sobre o seu CSS e marcação" ... Ehm não, na verdade não era.
Stijn de Witt

Respostas:

253

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.

configuração de layout do painel vertical

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.

Inspetor encaixado à direita com layout de painel vertical

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.

Configurações de resolução do dispositivo

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

Oisin Lavery
fonte
1
O inspetor é ideal para isso, até permite definir user-agent etc.
GDmac
2
Você é o cara. E é ainda mais simples depurar a tela pequena, quando há uma grande janela de inspetor apropriada.
Aebersold
1
Obrigado @aebersold Sim, é um bom bônus obter uma boa janela grande do Inspetor ao trabalhar em layouts para dispositivos móveis.
Oisin Lavery
3
Na IMO, essa deve ser a resposta aceita. A ideia é simples e brilhante, e sua dica acima da substituição das métricas é incrível. E também o bookmarklet ao qual você vinculou!
marlar 26/09/13
5
Ninguém mais conseguiu descobrir como encaixar as ferramentas do desenvolvedor, certo? stackoverflow.com/questions/10023640/…
Erti-Chris Eelmaa
36

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.

Chamika Sandamal
fonte
4
quando existem complementos, o navegador é redimensionado para o tamanho da barra de endereço e mantém os complementos visíveis. espero que você entenda isso. este não é um efeito colateral dos addons. mas quando existem complementos instalados, o navegador não pode ser redimensionado para o valor mínimo. por causa dos ícones adicionais ao lado da barra de endereço.
Chamika Sandamal
2
A remoção de todos os ícones de complemento no Chrome não resolveu isso para mim. solução de nayan9 fez.
Andrew Shooner
31
Esta não é a resposta . Mesmo com todos os complementos / extensões desativados, a largura mínima do Chrome ainda é de 400 pixels.
Oisin Lavery
4
@ChamikaSandamal não está correto. O OP está tentando escalar sua janela abaixo de 400px. Isso é impossível no Chrome porque o navegador tem uma largura mínima de 400px. A única maneira de obter o efeito que o OP está procurando é a resposta do Sherpanaut. Sua resposta não faz absolutamente nada além de ajudar o usuário a se aproximar da largura mínima rígida de 400px, que não é o que o OP estava procurando.
Fred Stevens-Smith
2
@ChamikaSandamal, embora possa funcionar para você, não está funcionando para o resto de nós. Não é nada contra você. Simplesmente, essa resposta é que não resolve o problema para muitos de nós.
DA.
19

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.

nayan9
fonte
1
LOL, fale sobre um hack para fazer uma coisa simples #
Otto
17

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

drinkdecaf
fonte
Esta é a resposta que funcionou para mim. Útil para que o Tweetdeck seja o menor possível.
Krug
10

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

Ícone Emulação do Chrome

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:

insira a descrição da imagem aqui

gl03
fonte
O mais impressionante é que eu não conhecia esse recurso ... finalmente, posso me livrar do switcher user-agent e emular adequadamente os dispositivos móveis, obrigado! +10 para isso
andreszs 12/09
Esse recurso foi substituído por "Barra de ferramentas do dispositivo de alternância" stackoverflow.com/a/44194243/1175496
The Red Pea
6

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

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:

O botão devtools

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

Mike Poole
fonte
2

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

Tamer Güner
fonte
2

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);})()
Rob Boerman
fonte
1

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.

Dan Freeman
fonte
0

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.

número 5
fonte
2
No Mac 10,9 Chrome 38.0.2125.104 este não é o caso
geotheory
1
No Linux Cromo 44.0.2403.89 este não é o caso quer
Ikar Pohorský
No Windows 8 Chrome versão 74.0.3729.131 (versão oficial) (64 bits), este não é o caso
The Red Pea
0

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/

Christos Hrousis
fonte
0

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

Markus
fonte
0

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/
Dr.Gaurav Gupta
fonte
-4

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.

user372719
fonte