Como posso dimensionar uma página da web inteira com CSS?

151

Usando o Firefox, você pode ampliar uma página da web inteira simplesmente pressionando CTRL +. O que isso faz é aumentar proporcionalmente a página da web inteira (fontes, imagens, etc.).

Como posso replicar a mesma funcionalidade usando simplesmente CSS?

Existe algo como page-size: 150%(o que aumentaria as partes da página inteira em x%?)

IJ Kennedy
fonte
7
O recurso de zoom da página do Firefox aparece em todos os navegadores modernos - replicar parece inútil.
Quentin
1
Eu concordo com o David. Parece tipo de inútil para replicar isso desde navegadores hoje em dia têm esse recurso construído em ....
usuário
5
esse seria realmente um recurso incrivelmente útil para dispositivos móveis. Muitos telefones agora estão aumentando seu PPI sem acomodar a diferença (além do iPhone4, é claro).
DA.
38
Não está replicando. Pode ser útil para algo como uma visualização de página / elemento em uma div incorporada.
RichieHH
3
O designer da página deve poder definir um zoom padrão para sua página. Eu tenho uma página que era grande quando a criei , mas pequena agora devido a telas de alta resolução: lonniebest.com/CardTrick Em vez de refazer a página, eu gostaria de ser ampliada por padrão.
Lonnie Melhor

Respostas:

182

Você pode usar a zoompropriedade CSS - suportada no IE 5.5+, Opera e Safari 4 e Chrome

Posso usar: css Zoom

O Firefox é o único navegador principal que não suporta Zoom ( item do bugzilla aqui ), mas você pode usar a propriedade "proprietária" -moz-transform no Firefox 3.5 .

Então você pode usar:

div.zoomed { 
    zoom: 3; 
    -moz-transform: scale(3); 
    -moz-transform-origin: 0 0;
} 
Jon Galloway
fonte
1
A propriedade proprietária de zoom é suportada apenas pelo IE. reference.sitepoint.com/css/zoom#compatibilitysection
Quentin
15
David, essa referência está muito desatualizada - veja as versões do navegador listadas. O CSS Zoom é suportado em todos os principais navegadores atuais, exceto o Firefox. E não é mais proprietário do que qualquer uma das extensões CSS -moz-.
21411 Jon Galloway
3
Nota: Eu acho que as outras soluções que foram propostas - como em e escalabilidade baseada em% - são mais "puras", mas não são necessariamente práticas na maioria dos layouts da web, a menos que você tenha construído dessa maneira do zero.
21416 Jon Galloway
1
Eu testei o Opera 10b2 e não parece suportá-lo. O Firefox todas as noites se comporta de maneira estranha (o fragmento ampliado desaparece). IE5 / 6 são de buggy. Funciona bem apenas no WebKit.
Kornel
2
obrigado jon, ótima informação! no firefox -moz-transform scale realmente funciona, mas dependendo do seu caso de uso, pode ser necessário corrigir a posição do elemento usando -moz-transform-origin (cfr. developer.mozilla.org/En/CSS/-moz-transform -origin )
futtta
80

Esta é uma resposta bastante tardia, mas você pode usar

body {
   transform: scale(1.1);
   transform-origin: 0 0;
   // add prefixed versions too.
}

para ampliar a página em 110%. Embora o zoomestilo esteja lá, o Firefox ainda não o suporta infelizmente.

Além disso, isso é um pouco diferente do seu zoom. O css transformfunciona como um zoom da imagem, por isso vai ampliar sua página, mas não causa refluxo, etc.


O Edit atualizou a origem da transformação.

kumarharsh
fonte
1
Obrigado por isso, mas você precisa de alguns pontos e vírgulas entre as declarações. Além disso, quando tentei isso, a página mudou para a esquerda, passou pela margem esquerda, para que a parte esquerda da página não estivesse mais visível. A adição das várias declarações "... transform-origin: 0 0" corrigiu isso.
Dave Burton
sim, eu deveria ter mencionado que o conteúdo está cortado transform. Obrigado pelo comentário.
kumarharsh
1
Concordo com @Dave Burton: usar transform-origin: 0 0;faz o que eu quero. Por exemplo, para ampliar a página a 150%: transform: scale(1.5); transform-origin: 0 0;. Acredito que a boa resposta de @kumar_harsh deveria ser corrigida.
Kai Carver
@KaiCarver, se você usar esse método, sempre resultará em recorte. Não importa para qual ponto você usa transform-origin. O que escrevi é apenas um exemplo de qual valor usar. Você é de curso livre para uso transform-origin: 0 0, se adapta ao seu caso de uso (ou se você não se importa com o que está lá no canto inferior direito)
kumarharsh
@AngularM, você pode compartilhar um snippet de código para mostrar o comportamento? Tenho certeza de que há outra razão para isso.
precisa saber é o seguinte
18

Se o seu CSS é construído completamente em torno exou emunidades, então isso pode ser possível e viável. Você só precisa declarar font-size: 150%em seu estilo para bodyou html. Isso deve fazer com que todos os outros comprimentos sejam dimensionados proporcionalmente. Você não pode dimensionar imagens dessa maneira, a menos que elas também tenham um estilo.

Mas isso é muito grande se na maioria dos sites, de qualquer maneira.

Joey
fonte
3
Isso mudaria apenas o tamanho das minhas fontes. A proposta CTRL + também amplia larguras, alturas e tamanhos de imagem fixos.
2
Eu sei, mas é o mais próximo possível do CSS puro. Além disso, não apenas as fontes são alteradas, mas tudo em que as dimensões são especificadas como um múltiplo do tamanho da fonte. Significado, tudo o que você usou %, emou exunidades.
21420 Joey
1
Isso não está correto. Testei a solução listada abaixo (propriedades zoom + -moz-transform) e funciona no FF3.5, IE6 +, Safari e Opera. Escala imagens e texto. Você pode dimensionar páginas em CSS.
21411 Jon Galloway
6

Como Johannes diz - não há representante suficiente para comentar diretamente sua resposta - você pode realmente fazer isso desde que as dimensões de todos os elementos sejam especificadas como um múltiplo do tamanho da fonte. Significado, tudo em que você usou%, em ou ex unidades". Embora eu pense que% se baseie em conter o elemento, não no tamanho da fonte.

E você normalmente não usaria essas unidades relativas para imagens, uma vez que são compostas de pixels, mas há um truque que torna isso muito mais prático.

Se você definir body{font-size: 62.5%};, 1em será equivalente a 10px. Tanto quanto sei, isso funciona em todos os principais navegadores.

Em seguida, você pode especificar suas (por exemplo) imagens quadradas de 100px width: 10em; height: 10em;e assumindo que a escala do Firefox está definida como padrão, as imagens terão o tamanho natural.

A marca body{font-size: 125%};e tudo - incluindo imagens - terão o dobro do tamanho original.

e100
fonte
Eu não entendo, se eu disser body {font-size: 62.5%; font-size: 125%} - como isso definiria 1em como 10px. O navegador poderia simplesmente ignorar a primeira declaração de tamanho de fonte e simplesmente criar 125% = 10px?
Eu acho que você não entendeu. você não faria as duas coisas ao mesmo tempo. 62,5 x2 = 125 ... para mostrar como você pode dimensionar as coisas ajustando o valor.
Ape-inago 21/07/2009
Sim. Eu deveria ter dito 'então, se você usar Javascript para definir o corpo {font-size: 125%}, todos os elementos da página dobrarão de tamanho'.
e100
3

Com este código, 1em ou 100% será igual a 1% da altura do corpo

document.body.style.fontSize = ((window.innerHeight/100)*6.25)+"%"
Cedric Austen-Brown
fonte
2
 * {
transform: scale(1.1, 1.1)
}

isso transformará todos os elementos da página

Rushabh Sooni
fonte
1

Jon Tan fez isso com seu site - http://jontangerine.com/ Tudo, incluindo imagens, foi declarado em ems. Tudo. É assim que o efeito desejado é alcançado. O zoom de texto e o zoom da tela produzem exatamente o mesmo resultado.

Andy Ford
fonte
1

O CSS não poderá ampliar a demanda, mas se você associar o CSS ao JS, poderá alterar alguns valores para fazer a página parecer maior. No entanto, como foi dito, esse recurso é padrão hoje em dia nos navegadores modernos: não há necessidade de replicá-lo. Por uma questão de fato, replicá-lo diminuirá a velocidade do seu site (mais coisas para carregar, mais JS ou CSS para analisar ou executar e aplicar etc.)

T0xicCode
fonte
É um recurso padrão do navegador, mas adicionar o recurso diretamente ao site significa que você não precisa confiar na (1) experiência do usuário com o navegador de sua escolha e (2) nas instruções específicas do navegador
Ags1
1

Eu tenho o seguinte código que dimensiona a página inteira através de propriedades CSS. O importante é definir a largura do corpo. inversão do zoom para evitar a rolagem horizontal. Você também deve definir a origem da transformação como superior esquerda para manter a parte superior esquerda do documento na parte superior esquerda da janela.

        var zoom = 1;
        var width = 100;

        function bigger() {
            zoom = zoom + 0.1;
            width = 100 / zoom;
            document.body.style.transformOrigin = "left top";
            document.body.style.transform = "scale(" + zoom + ")";
            document.body.style.width = width + "%";
        }
        function smaller() {
            zoom = zoom - 0.1;
            width = 100 / zoom;
            document.body.style.transformOrigin = "left top";
            document.body.style.transform = "scale(" + zoom + ")";
            document.body.style.width = width + "%";
        }
Ags1
fonte