0

I like the way my website looks at 90% better than 100%. Actually, I find this pretty regularly. Is there a way to just make it appear that way by default?

Jay
  • 13
  • 1
  • 6
  • Do you mean like the browser's zoom? – PHELMS Feb 26 '17 at 23:17
  • 3
    Possible duplicate of [Making HTML page zoom by default](http://stackoverflow.com/questions/22344246/making-html-page-zoom-by-default) – Psi Feb 26 '17 at 23:18

1 Answers1

3

try this css:

body{
    zoom: 0.9;
    transform: scale(0.9);
    transform-origin: 0 0;
    -webkit-transform: scale(0.9);
    -webkit-transform-origin: 0 0;
    -moz-transform: scale(0.9);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.9);
    -o-transform-origin: 0 0;
}
Theo Orphanos
  • 1,417
  • 1
  • 19
  • 27
  • In browsers that support `zoom`, won't this be smaller than 0.9x because the `transform: scale(0.9)` still applies? – gyre Feb 26 '17 at 23:26
  • You have a point here but I had tried this to a website long ago and if I remember well, it did't have a problem. But if there is an actual problem, the css can be reduced to just the first line, or employ javascript to check if browser supports zoom and then apply any corrections... – Theo Orphanos Feb 26 '17 at 23:33
  • I like this solution, pretty low-maintenance, and it does work to reduce the size of everything on the screen. This requires reformatting the width of elements though, because you end up seeing a bunch of space on the right side of the screen (doesn't shrink it in the same way 90% does on a browser somehow). – Jay Feb 27 '17 at 02:01
  • @Jay try applying the zoom to the next containing element (ie "wrapper" or "container"). Also keep in mind (as gyre pointed out) that elements might be scaled down twice. After doing some research, I found this which might be useful to you: http://caniuse.com/#feat=css-zoom Finally, if my answer to solved your issue, will you please accept it? Thank you, Theo. – Theo Orphanos Feb 27 '17 at 09:16