I'm trying to find a way to make my webpage display as if it's zoomed out to 80% by default, similar to what happens when I zoom out in my browser. I experimented with using the CSS property `transform: scale(0.8);` and set `transform-origin: top center;`, but it just squishes everything without resizing the containers as they would on a browser zoom. Is there a method to get my page to show at 80% zoom by default?
3 Answers
Make sure you're applying the transform to the right element. If you're scaling a div, it could lead to unexpected results. Check if you're transforming the `body` or a specific container instead!
You might want to use the viewport meta tag in your HTML to help with scaling. That usually can adjust how things are displayed, especially on mobile, but results can vary on desktop browsers depending on settings.
Adding a CSS transition could smooth out the scaling effect when you implement it. It animates the change in styles naturally. You just need to define what properties you want to transition in your CSS.
Related Questions
Cloudflare Origin SSL Certificate Setup Guide
How To Effectively Monetize A Site With Ads