Page 1 of 1
Fitting web pages within the computer screen
Posted: Tue Mar 13, 2012 9:27 am
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?
Re: Fitting web pages within the computer screen
Posted: Tue Mar 13, 2012 9:55 am
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.
Re: Fitting web pages within the computer screen
Posted: Tue Mar 13, 2012 11:03 am
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
Re: Fitting web pages within the computer screen
Posted: Fri Mar 16, 2012 9:17 am
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.
Re: Fitting web pages within the computer screen
Posted: Fri Mar 16, 2012 9:53 am
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
Re: Fitting web pages within the computer screen
Posted: Fri Mar 16, 2012 1:39 pm
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.
Re: Fitting web pages within the computer screen
Posted: Fri Mar 16, 2012 4:16 pm
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.
Re: Fitting web pages within the computer screen
Posted: Fri Mar 16, 2012 4:52 pm
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.