1

I tried to use this reference but could not achieve.

zoom:80%; css is working fine for only chrome but not for other browsers (IE,FF).

if I tried using 

transform: scale(0.8);
-moz-transform: scale(0.8, 0.8);
-ms-transform: scale(0.8);
-webkit-transform: scale(0.8);

but application shrinks and appears in the center. it does not utilize the whole screen as of chrome.

Please guide me to zoom out as well as the application to be utilize the whole screen.

Thanks and regards Harshal

Bhargav Chudasama
  • 6,928
  • 5
  • 21
  • 39
Harshal
  • 59
  • 1
  • 6
  • A working code in fiddle or codepen would help people to understand better. As from the reference you gave. He is exactly correct because I had the same issue couple days earlier, my local page was zoomed to 110% and my server was 100%. only fonts were changed but the images were still. It was a headache to find out. Try using specific fonts and with instead of relying on the browsers screen because if you have something in percentages that will mess up your layout. – Mohammed Wahed Khan Oct 25 '18 at 07:13

1 Answers1

1

You're nearly there. Let's see your approach in action first:

html {
  -moz-transform: scale(0.8, 0.8);
  -ms-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This results in a 80% size display in the center of the viewport, as you can see, so all you need to do is make the display larger and move it away from the center.

html {
  -moz-transform: scale(0.8, 0.8);
  -ms-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  
  width:125%; /* to compensate for the 0.8 scale */
  transform-origin:0 0; /* to move it back to the top left of the window */
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Mr Lister
  • 45,515
  • 15
  • 108
  • 150