Welcome to WebmasterWorld Guest from 54.166.198.6

Forum Moderators: open

Message Too Old, No Replies

Changing size depending on the screen (but NOT of an image!)

change size resize screen div

     
10:36 am on Nov 22, 2011 (gmt 0)



Hi everybody.
I have to resize my site depending on the current resolution of the window.
On the web I only find scripts (js, php and so on) that allow you to resize an image.
But I want to resize THE ENTIRE PAGE , including <img> <p> <a> and all the textes.
How can I do this ?
1:10 pm on Nov 22, 2011 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



I guess in theory if you specify all your sizes using relative units (%, em, etc.) then simply resizing the window (and perhaps altering the body font-size onresize) would affect the entire page?!
11:13 pm on Nov 22, 2011 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



Not sure what you're asking. Do you want the text areas to get proportionally larger or smaller? That should happen automatically unless you've overconstrained everything.

Do you want images to resize? This is tricky bordering on risky. Some browsers simply aren't very good at it. Making an image larger than its original size rarely comes out well. Making the image significantly smaller means that the user has wasted time downloading more material than they need.

Do you want the text size itself to change?

...

Excuse me. Gotta go find a barge pole.
8:39 am on Nov 23, 2011 (gmt 0)



Hi I know that is a bad idea resizing the site, but I depend on the ideas of a team of graphics, so... I have to obey :)
What I want is to rescale the ENTIRE site, so it isn't enough using relative units, beacuse I want to scale even text size...
10:05 am on Nov 23, 2011 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Text sizes can be specified in relative units too.

Your "team of graphics" do realise that all modern browsers support accurate 'zooming' of the entire page (not just font-size as it used to be)? On Windows... Ctrl + ScrollWheel.
2:05 pm on Nov 23, 2011 (gmt 0)



Yeah I know... But what can I do... graphics are graphics and think only about appearance...
And I'm a junior web-developer, so everything I say is not completely considered :(
Ok, now I try to set all the dimensions (even of the fonts) in relative units...
Thanks !
3:08 pm on Nov 23, 2011 (gmt 0)

WebmasterWorld Senior Member whoisgregg is a WebmasterWorld Top Contributor of All Time 10+ Year Member



There's a classic article regarding resolution dependent layout here [themaninblue.com] (and an updated demo here [themaninblue.com]).

The gist is that you have separate stylesheets and just swap out which stylesheet is active by detecting the window onresize event. Gmail currently employs this kind of strategy to adjust the vertical padding of email entries in your inbox based on how tall your window is.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month