0

I am trying to descrease my website page to 80% for smaller pc screen I have tried a zoom approach using clientWidth but couldn't get any success.

For example :-

if (document.body.clientWidth < 1500) document.body.style.zoom = 0.8

But when i used this approach my website UI gets disturbed.

enter image description here

You can see in this image I am getting a white strip line which disturbs my whole website..

Any help with example would be appreciated!!!

Ronak07
  • 894
  • 5
  • 26

1 Answers1

0

Without any further Details I would assume, that there is some form of static height for the body in your stylesheet, this is why there is a white stripe at the end of the page. May be you could take a look at this Question, which answers how to make a html body fullscreen.

But your approach seems legit, however you can achieve that also with plain CSS, i.e.:

    <style>
        @media screen and (max-width: 900px) {
            body { zoom: 0.9; }
        }
        @media screen and (max-width: 800px) {
            body { zoom: 0.8; }
        }
        @media screen and (max-width: 800px) {
            body { zoom: 0.8; }
        }
        @media screen and (max-width: 700px) {
            body { zoom: 0.7; }
        }
    </style>
novarx
  • 498
  • 3
  • 6