How can I achieve a default 80% zoom effect on my webpage?
Asked by
CreativeFrog87
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?
Answers
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.
Reply to this answer
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.
Reply to this answer
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!
Reply to this answer
Add your answer
Answers are reviewed before publication.
Related Discussions