I have a page built using HTML/CSS that is meant to be used for the sole purpose of being displayed on a TV. I've developed the page to fit perfectly within a 1920x1080 ratio, but I would like a way to have the page scale up or down with the exact same aspect ratio of the original design. Is there any Javascript script I could use to help maintain the constant ratio?

Edit: This will eventually be turned into a RoR application that will constantly update content such as news/events/etc.

I have a page built using HTML/CSS that is meant to be used for the sole purpose of being displayed on a TV. I've developed the page to fit perfectly within a 1920x1080 ratio, but I would like a way to have the page scale up or down with the exact same aspect ratio of the original design. Is there any Javascript script I could use to help maintain the constant ratio?

Edit: This will eventually be turned into a RoR application that will constantly update content such as news/events/etc.

• javascript
• html
• css

3 Answers 3

a simple listen on window resize would solve the problem:

$(window).on('resize',funciton(){
  var self=$('#ur_id');
  self.height( self.width() * (1080/1920))
})

You can use CSS @media queries for this

@media screen and (min-width: 1920px) {
   /*Styles goes here*/
}

Or you can use media = projection

The design for a device supporting 1920x1080 resolution mostly is not applicable to a mobile device for example. Maybe you need to hide some elements (generally sidebar) or decrease the font-size, load a different logo... So the best solution is a responsive web design using @media queries as @Mr. Alien suggest.

Responsive web design is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop puter monitors to mobile phones).

You can check some Guidelines and Tutorials at SmashingMagazine.