1

Consider this scenario - I'm developing web applications for use on a tv, they will ALWAYS be in full screen. As you may or may not know, each TV has a different 'safe area', because most cut off a certain amount on one or both sides. I'd like to use a web page that displays some sort of visual ruler so that I could easily see a tv's 'visible' screen, to find this 'safe area'. Does a web page like this exist somewhere yet?

If not, what would be an easy way (I'm guessing javascript) to draw an on screen ruler that could be used to find the 'safe area'?

ejfrancis
  • 2,925
  • 4
  • 26
  • 42
  • possible duplicate of [Can you get a users screen size/resolution using javascript?](http://stackoverflow.com/questions/10022584/can-you-get-a-users-screen-size-resolution-using-javascript) – Diodeus - James MacFarlane Feb 11 '13 at 16:36
  • 2
    The easiest way would probably be an image set as the background on the body. Google [finds this one](http://cgt256.wordpress.com/2011/03/01/layout-grid-background/) – Quentin Feb 11 '13 at 16:36
  • @Diodeus — **Not a duplicate**. This is about detecting overscan, not the dimensions the software thinks are available. – Quentin Feb 11 '13 at 16:37
  • @Quentin that looks like it will work, thanks for the easy solution. could you post it as an answer so i can mark you as correct? if its possible with a comment I don't see how – ejfrancis Feb 11 '13 at 16:49

1 Answers1

0

TV safe areas are approx 5% margin from the edge of the screen on new monitors.

When I do projects with this kind of resolution involved I simply add a generic 5% margin on the main container.

Not all monitors have the same safe area... but 5% is enough for all moderns one.

Edit:

Look at this as well: http://dev.opera.com/articles/view/creating-web-content-for-tv/#safe-areas

it say exactly what I wrote previously.

Andrea Turri
  • 6,480
  • 7
  • 37
  • 63