Rewritten title: Adjust browser zoom

Question

I need to create two buttons on my website that can change the browser's zoom level ( ) (-). I chose to request browser scaling rather than CSS scaling because of image size and layout issues.

Well, is this feasible? I've heard different accounts.

Answer 1

May work in IE and Chrome, but not in Firefox:

<script>
   function toggleZoomScreen() {
       document.body.style.zoom = "80%";
   } 
</script>

<img src="example.jpg" alt="example" onclick="toggleZoomScreen()">

Answer 2

I would say, it's not possible in most browsers, at least without some extra plugins. And anyway, I'd try to avoid relying on browser scaling, since implementations vary (some browsers only scale fonts, others also scale images, etc.). Unless you don't care much about user experience.

If you need more reliable scaling, then consider using JavaScript and CSS to scale the page's fonts and images, or perhaps do the scaling server-side. This solves image and layout scaling issues. Of course, this requires more work.