/    Sign up×
Community /Pin to ProfileBookmark

Solutions for dealing with different screen resolutions?

Copy linkTweet thisAlerts:
Jun 21.2010

I’ve got a Web-based App. that I’ve developed in 1680 x 1050 and I have some users in 1280 x 768, etc. The higher resolution is nice for this App., because it gives me more screen real-estate to take advantage of the newer rectangular screens. But, when a user in 1024 x 768 displays the screens, a good portion of the content is outside the viewable area of their screen.

Is there a clever way to set up my site so that my web pages will look good in most modern resolutions; i.e. 1024 x 768 and above?

I know I can re-work things to display at a minimum common denominator, kind of thing; or I could have multiple copies of my site
at different resolutions (which I really don’t want to do) and do js resolution-sniffing.

But, I’m wondering if there’s a better way. I do have a lot of AP elements and I’m not certain that making the pages liquid with percentage widths, etc. will solve this particular problem.

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@criterion9Jun 21.2010 — Use min-width and fluid measurements (em, %). This is all done using CSS, there is no need to use Javascript to accomplish that.
Copy linkTweet thisAlerts:
@redtailauthorJun 21.2010 — Thanks for the suggestion. I had thought about doing that, but I wondered whether liquid screens might be a little different than a screen resolution issue. Maybe I will give this a try and see if it works.
Copy linkTweet thisAlerts:
@criterion9Jun 21.2010 — What we have been doing at work is using a specific width for our "sidebar" based on the font size (em value) then having our main content expand to fill the rest of the area (less 10% negative space on the sides).
×

Success!

Help @redtail spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...