Question

I opened the Stack Overflow website on my 47 inch LCD TV (resolution 1920 * 1080, 16:9) and found the text and website right in the middle of a lot of whitespace. The text was unreadable because Stack Overflow, like many other websites, is optimized for standard 1200/1024 viewports.

In order to make the website readable, I pressed ‘ctrl’ and ‘+’ keys and sort of got the content to occupy more screen width. I am sure this is not “zoom in” because what the browser is actually doing is scale up the content size (i.e. reduces the no. of pixels per character).

Can this ‘ctrl +’ behavior be achieved using Javascript as a pre-render exercise after detecting the resolution/size parameter of the viewport?

Update: I tried @media-queries which scales font-sizes and other few things, but it doesn’t help to scale images and rest of the content (such as padding etc.) in a balanced way. Most importantly, it doesn’t satisfy the condition to restrict the size of a given div to say “610px and yet occupy 75%” of the available screen-width.

Which is like a resolution change if we press ctrl + on Gecko/Webkit based browsers. Sorry can’t accept the answer below.

Answer 1

Mostly yes.
IE6,7 have zoom and IE8 has -ms-zoom

Everyone else has 2D transforms and scale() so you’re covered. see zoom css/javascript

I havent seen anyone apply this sort of effect to the entire document, so things might be buggy. Enjoy!