Have you ever noticed that when you press Ctrl+- on any browser, the page scales down to 90% of its original size? It actually looks nicer at 90%, so I want my webpage to default to opening at 90% instead of 100%.
I've tried following common approaches mentioned in different places like here, here, and here. They all suggest adding a code block like this in your css.
html
{
zoom: 0.9; /* Old IE only */
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
The issue with this method is that it creates gaps on the sides and a large gap on the top, which isn't how it appears when manually reducing the size using ctrl+-.
Check out what happens when I implement the above code - notice the gaps on the left, right, and top.
This is what I really want - this is the result you get when manually scaling down by using ctrl+- in your browser.
So, how can I achieve this ideal display?
UPDATE: As suggested in the comments by Jonathan, if my page looks better at 90%, I should have originally designed it that way rather than needing to scale it down. The challenge lies in the fact that I'm using this default template, and I simply prefer it at 90% compared to the full 100%.