Detect Monitor Size and Adjust Accordingly?

to deal with smaller monitors

[Reno]

Here's the situation: A client tells you they want their website built to fit nicely on their new monster monitor, so you tell them it should be built for most of the public, not for the latest and greatest.

They write back to say they want it for their mega-monitor. You try again but they insist.

Want to predict what happens next? People start sending them feedback saying it's a pain in the butt to have to scroll back & forth. Hey, no surprise there.

So here's the question: Is there a javascript to put in the head, or perhaps CSS (to use with a starting and ending div on each page), that will resize the entire webpage content based on a defined percentage.

So for example, if you designed the page to fit in a 1366 environment and people with 1024 start complaining, is there a way to detect that 1024 viewer's monitor and auto resize all the page content (text & graphics) down by 76%?

Essentially, it is the same as the person going to IE tools and zooming from 100% to a lower number, only they would not have to do it, this script would do it automatically for the pages on this site only. So when they went onto another site somewhere, their monitor would be in the normal state, not the auto-resize.

I've been looking through a ton of javascripts and basically see 2 choices: You can alert the person and suggest they change their own browser settings (IMO not a good approach); or [2] You can redirect them to a second set of pages built for smaller monitors (twice the work and cost to client).

If there is a way to properly deal with the question I'm posting, then that may solve the problem. However I have a feeling it's a pipedream, but thought I'd turn to the experts to see if anyone has run into the same thing and come up with a solution. Thanks for any thoughts....

..........................

[1][edited by: Reno at 6:23 pm (utc) on Mar 7, 2013]

[Leosghost]

Adapt what you find here..doesn't require javascript..doesn't apply just to mobiles..read the "responsive design" threads here too..
[webmasterworld.com...]
HTH :)

[Fotiman]

This is a CSS question (since we're talking about presentation). :)

Do a search on "responsive design" or "responsive web design". To summarize, you basically use media queries to apply styles based on the current max-width. For example:

.container {
  width: 1366px;
}

@media (max-width: 1024px) {
  .container {
    width: 960px;
  }
}

Read up on Responsive Design.

[Reno]

Thanks Leo and Fotiman for pointing me in a direction ~ will see what I can put together to make it do what I'd like.

Re "CSS question", I was thinking it might need a JS to detect the monitor size, and a CSS to present what we'd want. I'm pathetically sad with this sort of thing, but will give it a shot and will report back if I can hack together anything successful which could be useful to others...

.........................

[lucy24]

is there a way to detect that 1024 viewer's monitor and auto resize all the page content (text & graphics) down by 76%

Whoa. Careful there. Is your client looking at resizing the TEXT, or resizing the TEXT AREA? People with smaller monitors do not necessarily have better eyesight; in fact the opposite may be true. (Older users with older computers...)

Most problem will go away if you define horizontal dimensions in percentages. You may need to go to an entirely different approach if the viewport is really, really small so things will no longer fit side by side. But other than that, the only things that have to be sized in explicit pixels are images.

Loading up an image file and then displaying it as a percentage (with max-width so it is never bigger than actual size) is not the best answer. That just means that most users will be downloading more than they're seeing. There exist utilities, including third-party Apache mods, that will resize images on the fly so the user only downloads what they're really seeing. But you should be able to do it within the site.

Now personally I'd say this is the time to let the client stew for a while.

#1 Client insists on laying out site in a certain way, over designer's objections.
#2 Human users of client's site complain to client about the exact features that client himself insisted on.

#3 OP re-posts story to clientsfromhell dot net or similar site

:: snrk ::

I was thinking it might need a JS to detect the monitor size

Nope. It can be done right in the html. (Surprised me too, but I'm not complaining.)

[Reno]

Thanks Lucy for your informative post. In this fellow's message to me he had asked if there was a relatively easy way to "fix" things. My own feeling was we'd be piling a bad solution on top of a bad decision, but you know how it is ~ you have to look into it, just so you can say you tried. I just told my wife a few minutes ago that I'm dying to say to him "hey, I TOLD you so", but that sort of thing rarely ends in a productive manner, so must bite my tongue (which I've continued to do, though it's starting to bleed!)....

;)

..........................