2

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.

Marvin Danig
  • 3,738
  • 6
  • 39
  • 71

2 Answers2

3

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!

Community
  • 1
  • 1
Paul Irish
  • 47,354
  • 22
  • 98
  • 132
  • That's a cool tip @paul. Let me see the results, and respond shortly. – Marvin Danig Feb 26 '12 at 13:11
  • I tried using scale(), but finally I got this worked out using another algorithm. Here is the demo page which resolves in a resolution-stationary manner: http://bubbles.bubbleideas.com/letters/arvind-arvind-nigam-bubbles-bubbles-semantics-bubbles-june-12th-tuesday-06-pm Meaning no matter how much Ctrl+/Ctrl- does a user do, the paper will resolve as if it were stationary w.r.t device pixels/screen. Sorry to update so late. – Marvin Danig Jun 14 '12 at 11:08
1

I'm sure it's possible with javascript, as most things seem to be, but I think that this is the exact kind of problem that CSS Media Queries were specifically designed to solve.

Check out the article on Responsive Web Design over at A List Apart

Cory Danielson
  • 14,314
  • 3
  • 44
  • 51
  • Assigning max-width min-width range (@media-queries) does help, but it doesn't seem to give the exact effect of 'ctrl +' on the browser. For example, the following website has a Responsive Web Design: http://foundation.zurb.com/, but it doesn't quite scale up to fill the entire TV screen and be readable at the same time. I have to use 'ctrl +' to scale up the text and image size. I believe that responsive design focuses more on handling content layout between landscape & portrait modes. – Marvin Danig Dec 07 '11 at 20:20
  • Well, that website has a fixed width layout of about 980px when the screen width is very large. Is this "ctrl +" effect something you want to apply to your own website or to a browser plugin? – Cory Danielson Dec 08 '11 at 07:09
  • yes. I was thinking of making a website which is designed completely on percentage declarations, with only 'min-width' to ensure layout integrities are maintained when the browser is shrunk/resized. Is there any known/accomplished way (using javascript) to make sure that the browser is scaled up to a resolution where % widths end up giving out element dimensions of fixed pixel count? – Marvin Danig Dec 08 '11 at 10:17
  • 1
    No, I don't know of anything to do that... but I suppose you could use media queries, and on the higher resolutions, increase the font sizes from 11/12px to maybe 18px or higher. – Cory Danielson Dec 08 '11 at 16:59