Zoom out page CSS

Question

I have a website that works perfectly when I zoom out my browser to 50% . But it is very bad on normal size ( 100% ). I already use transform and zoom on the CSS but not being what I wanted CSS . I cannot decrease font or image because of some reason. All I want is to just make this page look like I zoom out the browser 50%.

Thanks for all your help.

 <style type="text/css"> .navbar-brand{ position: absolute; width: 100%; left: 0; text-align: center; margin:0 auto; } .navbar-toggle { z-index:3; } .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: block; } .dropdown-content { display: none; position: absolute; right: 0; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } @media (min-width: 1025px) { html { /* -webkit-transform: scale(2); -moz-transform: scale(2); transform: scale(2);*/ /* transform: scaleX(1) scaleY(.5);*/ } } @media (max-width: 600px) { #judul{ visibility: hidden; display: none } #menu{ display: none; } #menu-content{ display: block; position: relative; } #logo{ visibility: hidden; display: none; } </style>

Answer 1

You can use a non-css solution for this:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Viewport

But you can actually use CSS to zoom (but i dont recommend this for the entire page):

 /* you can apply this on body aswell */ .zoomedElement { background-color: #CCF; zoom: 300%; } .scaledElement { background-color: #FAC; transform: scale(1.2); /* scales in all directions, probably not what you want but worth mentioning */ }

 <div class="zoomedElement"> <h6>Heading Zoomed</h6> Some text... </div> <div class="scaledElement"> <h6>Heading Scaled</h6> Some text... </div>

Answer 2

You can effectively render at 50% zoom by setting the body's width / height to 200% , but at 50% scale with transform . You'll also need to set the transform-origin to top left to avoid the scale transformation from shifting the top left corner of the body away from the top left corner of the window.

This can be used for arbitrary zoom levels, just by using that proportion for scale , and the inverse of that proportion for width / height .

body {
  width: 200%;
  height: 200%;
  transform-origin: top left;
  transform: scale(50%);
}