3

I'm working on a very mature web app developed in ASP.Net MVC... and the app is used by old people (over 60 years), so they constantly complain that the size is small and they cannot see very well.

So I tried to start increasing font-size of button, text, and so on... but the web app is very mature and have thousand of view and items, other item depends on bootstrap and need to dig into bootstrap in order to change the font-size.

So I came up with an idea when the user access the website, the web app should zoom to 150% automatically. I tested it in google chrome (manual) zoom, and send the screenshot of this to the clients, they all agree with that size.

So please how do I automatically zoom to 150% on all browsers when the page load?

GirlCode
  • 85
  • 7

2 Answers2

1

Use the zoom style on the body of your css, and the -moz-transform for the firefox

body {
    zoom:150%;
    -moz-transform: scale(1.2);
    -moz-transform-origin: left top;
}
Aristos
  • 66,005
  • 16
  • 114
  • 150
  • I'd have suggested this as a quick solve too, though it is not supported in Firefox! https://caniuse.com/#feat=css-zoom – flx Jan 23 '20 at 07:24
  • 1
    @zeropublix Ok, I add for the firefox the similar css. Note the `left top` for correct zoom in. – Aristos Jan 23 '20 at 07:30
0

Looks like a duplicate of this question: How to Increase browser zoom level on page load?

There is a zoom rule in CSS:

body {
    zoom: 2;
    -moz-transform: scale(2); // for support in Firefox
}

And as mentioned in one of the answers (by Vinod), it is also doable using Javascript:

<script type="text/javascript">
    function zoom() {
       document.body.style.zoom = "300%" 
    }
</script>
Ramen
  • 19
  • 3