Search code examples
jqueryhtmlcssstylingscreen-resolution

HTML Frontend for all screensizes

First off, I'm not sure if this is actually a "legal" question to ask here on StackOverflow since it is not really about programming, but more on the frontend-part.

I'm about to create a webpage which acts like a diasshow in fullscreen. Creating the actual diasshow isn't a problem at all, but it needs to run on all screensizes, all the way from an iMac 27" with it's very high resolutions, full HD tv screens and all the way down to an iPad.

What I have done so far is to style every single element with percents. The design looks good on my own 22" screen and on my 42" tv, but when it's shown on i.e. an iPad or iMac (or even a difference size tv), it doesn't fit the screen. If it's shown on the 27" iMac it only fills up the 1/4 of the screen and on iPad, the elements are too large to display.

I feel like I have overlooked something here (?) or is it just plain-out impossible to create a fullscreen webdesign that works on all monitors?

Any help/input on this is greatly appreciated! :-)

Thanks a lot in advance.

  • Bo

EDIT: I took a few screenshots for you:

First the iMac 27":

http://www.bo-mortensen.dk/slideshow/imac/firefox_1920x1080.png

http://www.bo-mortensen.dk/slideshow/imac/firefox_2560x1440.png

http://www.bo-mortensen.dk/slideshow/imac/safari_1920x1080.png

http://www.bo-mortensen.dk/slideshow/imac/safari_2560x1440.png

And the TV:

http://www.bo-mortensen.dk/slideshow/tv/firefox_1080i_tv.png

http://www.bo-mortensen.dk/slideshow/tv/firefox_720p_tv.png

http://www.bo-mortensen.dk/slideshow/tv/safari_1080i_tv.png

http://www.bo-mortensen.dk/slideshow/tv/safari_720p_tv.png

And the link to the solution:

http://grenaabilhus.mercatus-democms.dk/

Solution

  • I would use CSS3 Media Queries, where you can set different rules and designs, for different screen sizes like:

    @media handheld and (min-width:20em) { ⋮ one or more rule sets… }

    @media all and (max-width:50em) { ⋮ one or more rule sets… }

    And I would check out this site , a great example of what is possible (try to scale this page, and see what happens...)

    Good luck!