Fitting web pages within the computer screen

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
Php Beginner
Forum Commoner
Posts: 28
Joined: Fri Nov 04, 2011 9:04 am

Fitting web pages within the computer screen

Post by Php Beginner »

Hi there,

I have a couple of web pages created but when I am previewing them in internet browser, the web pages somehow not fitting the screen when I trying to display them with different pc.

Meaning to say, if I create web page using larger screen pc and the webpage cant be fully preview when using a smaller screen pc. How can I make my web pages fit the screen flexibly?
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Fitting web pages within the computer screen

Post by Celauran »

You could set the width to a percentage value rather than a static value, though this may introduce new challenges. Alternately, use a fixed width but scale it down a little.
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: Fitting web pages within the computer screen

Post by social_experiment »

If you set the width of a element to 100% is will auto-fit the screen that you are viewing the page one; one of the issues you will face is to make sure that the width of any container doesn't exceed 100%. Any padding that you add is added to the width value so a padding-left value of 5% and a width value of 100% the total width of the page will be 105% and will give you the horizontal scrollbar of death at the bottom of the page
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
whiterainbow
Forum Newbie
Posts: 11
Joined: Fri Mar 18, 2011 9:13 am

Re: Fitting web pages within the computer screen

Post by whiterainbow »

I use Blueprint, which has a standard width of 950px. This width should work in all browsers, although different monitors you'll obviously get a different amount of whitespace.
Eric!
DevNet Resident
Posts: 1146
Joined: Sun Jun 14, 2009 3:13 pm

Re: Fitting web pages within the computer screen

Post by Eric! »

You've got 320px on iPhone and 2560px + on large monitors.

You can use HTML5 & CSS3 media queries for scaling. A 980px container is optimized for any resolutions higher than 1024px and you can use media queries to see if the view port is smaller than 980px. Then you can layout a "Normal", a "Narrow" and a "Mobile" layout. Naturally IE8 and older you have to use Javascript to detect the display size, but other browsers can use CSS3. This is a pretty good tutorial: http://webdesignerwall.com/tutorials/re ... ia-queries
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: Fitting web pages within the computer screen

Post by califdon »

You can never win this game. Not everybody runs their browser full-screen; I seldom do, because i like to have some of my desktop visible so I can easily switch windows or launch from a desktop shortcut. So my advice is don't worry too much about it, you'll never perfectly fit everybody's view of your website, anyway.
Eric!
DevNet Resident
Posts: 1146
Joined: Sun Jun 14, 2009 3:13 pm

Re: Fitting web pages within the computer screen

Post by Eric! »

The viewport is the size of the browser window, not the screen. So the technique I describe adapts to your browser's visual area.
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: Fitting web pages within the computer screen

Post by califdon »

Eric! wrote:The viewport is the size of the browser window, not the screen. So the technique I describe adapts to your browser's visual area.
I stand corrected on the use of the word "screen". I wasn't referring to your solution in any case, rather to emphasize the fact that you can't really anticipate the kinds of devices that will be viewing your page or whether the user will be viewing full-screen or a smaller viewport, even perhaps a much reduced window. You can detect the viewport dimensions and use percentages or other schemes to adjust for reasonable differences, and that's certainly a useful thing to do, and I'm sure your code does a good job of that. But my point is that there's a limit to what you can do for extreme cases. Clearly, I can resize my viewport to make your page unreadable, although most users will not be inclined to do so. Anyway, you're right to call attention to the distinction in terms.
Post Reply