Properly use large screens for images

Question

I have a 48" tv hooked up to a computer and I am trying to use it as best I can.  I am making a web app that displays daily quotes in a grid format and it takes up the whole page. for example a grid of 9x4 = 36 small pictures, my pictures have some text on them which becomes unreadable on small laptops but when I output to a tv it is still unreadable yet the pictures are bigger because its on a 48" tv.

Please check out http://jsfiddle.net/hX46r/1/

How can I make the pictures with text on them readable when viewing on large screen TVs.

Also the web app is going to be made for windows 8, can windows 8 properly use the screen size to show pictures clearly? As I will be outputing to a 48" TV scan the windows 8 app display images correctly and make the text readable?

Answer 1

This is a rather large topic, so I am going to recommend that you read this:

http://msdn.microsoft.com/en-us/library/windows/apps/hh465349.aspx

---

Matt Small - Microsoft Escalation Engineer - Forum Moderator
If my reply answers your question, please mark this post as answered.

NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

Answer 2

See Quickstart: Designing apps for different window sizes for how to define your Windows Store app for different displays.

For help with a web app you should ask on a web app forum. The Building Windows Store apps with HTML5/JavaScript forum is specifically about writing Windows Store apps, although the general concepts will likely be similar (especially if you use WinJS in your web app).

--Rob