6

When you press Ctrl+- on any browser, the page scales down to 90% of it's original size. I need to replicate that, and open my webpage at 90% of it's original by default, instead of 100% because it looks nicer at 90%.

I tried the most common approach as mentioned here, here, and here, all of which basically tell you to add this block of code 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 problem with this is that it creates a gap on the left and the right sides, as well as a huge gap on the top, which aren't present when you manually reduce the size by doing a ctrl+-.

This is what happens when I use the above mentioned code - notice the gaps on the left, right, top. This is what happens when I use the above mentioned code

While this is what I want - this is what happens when you do a ctrl+ - manually in your browser. While this is what I want - this is what happens when you do a ctrl -.

How do I go about this?

EDIT: As Jonathon said in the comments, if my page looks nicer at 90%, I should have designed it to be that way instead of having to scale down. The problem was that I'm using this default template, and I just prefer it at 90% over the full 100%.

Community
  • 1
  • 1
Randomly Named User
  • 1,889
  • 7
  • 27
  • 47
  • 18
    Might not be what you want to hear, but if your page "looks nicer" at 90%, you should design it to look that way at 100%. You shouldn't really monkey with users' preferences in that way. – Jonathan Aug 25 '15 at 16:26
  • Haha @Jonathan, true. But now that I'm using this standard template - http://startbootstrap.com/template-overviews/business-casual/ and I like how it looks at 90% over 100%. Any idea on how I should proceed? – Randomly Named User Aug 25 '15 at 16:28
  • 1
    @RandomlyNamedUser You need to modify the template. You're very unlikely to get an exact match by trying to manually scale stuff - the browser rendering is what'll be changing when you scale the output. You really need to go through the CSS and make it match the 90% – Ian Aug 25 '15 at 16:30
  • just using html{zoom:.9} seems to be working! (although zoom is ie specific and transform is the new one) – radiant Aug 25 '15 at 16:41
  • @radiant, thanks, it is :) But that will work only on chrome and IE and I need to make my code browser independent. – Randomly Named User Aug 25 '15 at 16:48
  • test in ie if that works too? also play with "transform" property. IMHO, it would best to update css where it needed to be browser independent than trying a messy hack, – radiant Aug 25 '15 at 16:50

2 Answers2

1

You need to use/convert to relative units in your CSS. Either % or em or rem.

Then at the body level you can set an absolute size that results in the relative measures recalculating to what you want.

If you use em or ex exclusively: You declare font-size: 90% for body and you'll be able to adjust on the fly.

It all comes down to the units you choose and making them relative will allow you the kind of freedom you are looking for now.

Matt
  • 1,167
  • 1
  • 15
  • 26
0

Maybe you can compensate this gaps with margin-top:-50px; for specific elements.

Marek Stašík
  • 1
  • 2