Zoom virtual via CSS

Olá Gente!

A Alguns dias tive um cliente que me pediu algo curioso:

Preciso que o tamanho de todos os elementos do site sejam reduzidos para 80% do zoom do navegador.

Mas como forçar o zoom do navegador? Bom, o zoom não posso forçar, mas posso simular via Css, utilizando o “scale”.

Para isto, basta adicionar as linhas abaixo:

body 
{
    transform: scale(0.8);
    transform-origin: 0 0; 
}

Porem, você ira perceber um problema, o “body” é reduzido, mas isto faz aparecer barras laterais no site, afinal, o o body ficou menor ao ser reduzido.

Porem, podemos resolver simplesmente aumentando o width:

body 
{
    transform: scale(0.8);
    transform-origin: 0 0; 

    width: 125%;
    height: 125%;
}

Finalizando este tutorial, pessoal! 👩‍💻

Até mais! 👋