View Full Version : Scaling entire web page after resolution.

02-13-2012, 09:40 PM

For a documentary film about the Chernobyl zone I am working on with a few friends I have built this site http://footprintsofdisaster.se/

The entire page is done with HTML, CSS and a couple of Javascripts, but now after the development is basically done I'm looking into compability for different browsers and different resolutions. What I have noticed there is that on smaller screens the page is quite big. The lit-up part is just over 1000 px wide and about 700 px high. Sure I can argue that making it so big wasn't the best move, but making it 800px wide with a corresponding height gave me the size problem on high resolution screens. Due to the background image sized etc. every measurement is static and the entire page layout is static.

Anyway. One way to deal with this problem, one way to give myself lots of work is by resizing all the images and making new CSS-files for different resolutions, but I don't really see that as an efficient way of dealing with the problem, so what I would like to do is to scale the page.

I can specify specific CSS-rules when the browser window is a certain height, here 640px for example.

@media screen and (max-height: 640px) {
Regular CSS-rule }

I can probably do the same with Javascript, or maybe even jQuery has some nice functions for this.

The problem I have and that I would appreciate help with is how, and if it is possible, to scale the web page like it scales down when you scroll your mouse wheel while holding ctrl.

So let's say you browse the page with a screen that is 1366x768, the page will scale down so its width is around 700 px, or two steps scrolled out with ctrl+mouse wheel.

Can scaling after browser or screen resolution be applied in any way without using additional CSS-style sheets, and if so, how will I do that?

02-13-2012, 10:32 PM
zoom property (http://reference.sitepoint.com/css/zoom)

... which sets the magnification scale of an element (same as what ctr + mousewheel does)

My suggestion would be to use @media for various widths that are most common. In the below link click on the "Higher" and you will have to figure out which one's you would like to support.

I recall hearing that @media doesn't work well for mobile devices, but I'm sure you can find a javascript solution on google.

I will caution you now that some monitors are less than 1000px wide, so the text and entire website may be too small to even be legible. Most users won't be expecting a site that zooms based on screen resolution, so I myself wouldn't even try to scale my webpage.