Shrinking high resolution site to display in smaller monitors

Making 1920x1080 lobby displays available for users to see in their browser

[Duskrider]

Hi all,

I've been trying to wrap my brain around this and need some ideas on how to accomplish it. We've just finished creating an in-house lobby television system that displays building information and an employee directory. There are two TVs (1080p) hooked up to a single small media box running Firefox fullscreen in each window. The browsers are pointed to a script on our webserver which serves the displays as a 1920x1080 webpage and uses various AJAX trickery with PHP to rotate pages and fetch weather updates, etc. In addition, we have a news ticker and an alert system.

In short, what I would like to do is be able to take the website those screens point to and shrink it such that it can be displayed on a desktop computer running at a standard resolution... something like 1024x768. The aspect ratio would need to stay the same even if I need to add bars to the top and bottom, and I'd like to preserve all the formatting and display elements including the ticker and weather updates. The users in our building would like to be able to check what's going on without heading to the lobby to see the screens, and it would be great if we could box in what's being displayed on our intranet site somewhere.

I've looked at using a webcam that points to the screens, but that seems like a clunky solution considering what's being displayed is a website that any user could just browse to if it weren't for the resolution. Asking users to browse to the site and hit CTRL - to shrink it down won't work. I thought about using a PHP script to take screenshots and shrink them down, but it wouldn't preserve the news ticker.

Is there any way to tell a browser to just shrink a page? Could I somehow frame in the 1920x1080 page and show it at a smaller resolution?

[Fotiman]

You could probably use something like the Yahoo UI Library to get the size of the viewport (you don't NEED to use YUI, but it provides nice cross-browser methods), and if the size is less than 1920x1080, then apply some style that causes the page to be smaller.

For example:

var w = YAHOO.util.Dom.getViewportWidth();
if (w < 1920) {
  YAHOO.util.Dom.addClass(document.getElementsByTagName('body')[0], 'desktop');
}

Then your CSS rules could be something like:

body {
  width: 1920px;
}
body.desktop {
  width: 1024px;
}

[astupidname]

With a bit of reworking perhaps, you could use relative width's instead of fixed width's also: body {width:100%;} although I guess it would get a bit tricky to maintain aspect ratio via css alone. But how important is that really? The users on computers can scroll a bit, just have it set up to display fully on the tv's and let the comps scroll would be simplest.