homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

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)

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)

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)

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)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved