• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 545
  • Last Modified:

Page Size Detection

I have created a web site with about 5 pages.  What I want it to do seems simple because you see it all the time.  If someone comes to my site and lets say that there screen is set to 1024 X 768 pixels, well I want my web site to display that size automatically.  Ok, fine now lets say someone comes along and they are set to 800 X 600.  Well, I want my page to adjust to that automatically on the width.  I don't think the lenght matters much since everyone scrolls down to the bottom of pages anyway.  Its the width that I want to be automatic.  

I used Publisher 2000 to build the web site.  It seems to think you have to setup your page to some dimensional size (example 7.5 w X 14 d) and if you do then depending on what screen size you computer is set when you view the pages if the page don?t fit your screen then you get scroll bars to view the pages.  I don?t want that, I want my pages to conform to what ever settings the visitor has.  I also have Internet Design Gold, but I?m sure if it has that built in properties for web design.

I hope my question is clear enough.
1 Solution
The information you are asking for is not sent to the server by default from the browser so you can use a server side scripting language (PHP) to get this information.

This link http://javascript.internet.com/user-details/browser-info.html will take you to a sample javascript that reveals details of the browser and screen resolution.  To get this to your server, you would have to write an index page that was basically all javascript and all it does is retrieve the screen resolution information and redirect to a url passing that info (i.e. script.php?w=1024&h=768)

That being said, even knowing the screen resolution is not the end of your troubles, because the user may not have the browser maximized.  In this case the window width and height could be significantly less than the resolution.  I believe there are javascript properties for this as well, but may be browser dependant (document.body.clientWidth works for IE5.5)
First of all, don't use Publisher. It's a print program, not a web one, and it locks you into a 'page size' -- a setting that doesn't exist in a web editor, because there's no such thing. The 'page size' is whatever the USER decides it's going to be. You can size your CONTENT to fit a certain dimension, but it's certainly not REQUIRED.

You don't need javascript, don't need anything fancy, don't even need to spend any real money -- you just need to get rid of Publisher. Try using a web editor and learning some basic HTML. That will allow you to set your content to no particular dimensions at all -- it will just fill up the screen.

However, this does nothing for GRAPHICS -- if you want your graphics to resize, the best way to do that is to make different size graphics, and then you WILL need to use javascript to determine which graphics to load. But frankly, I think that's WAY beyond what you need.

If you have mostly text on your pages, and some graphics, you just need to start working in a web program and not a print one. Netscape Composer will probably be enough to get you started -- Netscape is free, and Composer is part of it. Or, you can get started with a real solid HTML editor, but you won't be able to directly see what you're doing. A good free code editor is FirstPage (www.evrsoft.com).

Lots of web tutorials are at www.webmonkey.com
There are tons more online... you can easily learn HTML and even most of the javascript you might ever want to use without spending anything on software or books. ;-)
Agrees with webwoman about not using Publisher. Best thing would be to use a texteditor for best performance (IMHO). If you want to scale in the width of the window you should use percentages instead of fixed width's. Whether a scrollbar appears or not depends then on the data. For example a table set to a width of 100% on a 800x600 screen and an image inside that table with a width of 100 won't show a horizontal scrollbar, but an image of 1000 will.

Vertical scrollbars depend on how much data is being truncated to the next line. If the total amount of data exceeds the height of the html page a vertical scrollbar will appear. To overcome that problem you can use a scrolling layer script. Once you use such a thing you can turn scrolling OFF for the whole page and use the layer to scroll to the next bit of data. If that is what you want I can show you a script. If not I suggest you take a look at plain HTML tags and their attributes.

<table width=100% border=1 cellspacing=0 cellpadding=0>
  <td width=100%>

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Publisher locks you into a page size that controls both width AND height -- and height doesn't exist on a web page. You don't break things into arbitrary 'pages', the 'page' is as much data as logically goes together. Could be 20 printed pages, could be 1/2 of one. Both are a web 'page'.

I would suggest you not even look at the code that Publisher generated -- not only is it not going to make any sense at this point, it's unbelievably bloated. Full of nested tables, made up graphics names, spacer graphics, empty cells, etc.

Either get a good web editor and use that, or get a good book/online tutorial, use Notepad and learn HTML. It will take a little longer when you start, but you'll be much better off in the long run.

And you won't be locked in to anything... ;-)
>>>What I want it to do seems simple because you see it all the time.

Yes. It is simple if you understand HTML and a little scripting.  If
you do not then you are not going have a lot of luck.  The simple aproach
is to use tables with percentage sizing and let them re-size by themselves;
a possible solution that was already suggested.

That will work for simple layouts.  If you get into a page with absolute
positioning on some elements then it takes scripting.

And it can get real complicated if you need relative resizing of elements
based on resolution.  Then you can get into stuff like this, that no
editor can generate:

// this will size an element to the width of a 16% cell in an 80% table at any resolution

var IE = (document.all) ? 1 : 0;
var NS = (document.layers) ? 1 : 0;
var CurrentWidth = 0;
var cellwidth=0;
function SetNewSize(divid)
CurrentWidth= (IE)? document.body.clientWidth : window.innerWidth;
cellwidth=Math.round(CurrentWidth * .8 * .16);
if (IE)
if (NS)

That's just to re-size one element which is assumed to already
be correctly position.

So whether or not it is simple depends on your skill level, and how
much time and effort you are willing spend learning.


like I said, it's not tested
Plug in the appropriate pages below...this means you nead to make multiple sites for different size resolutions...you can see I got lazy and cheated and only sent to 2 sizes...

The "please stand by" part goes by so fast you do not even see it...you just suddenly are where you belong according to your screen resoulution.
Good Luck,
Jim S.
aka TenTonJim


<title>Ton Ton Web</title>
<script language="JavaScript1.2">
var width1=800
var height1=600
if (screen.width==width1||screen.height==height1)

var width2=640
var height2=480
if (screen.width==width2||screen.height==height2)

var width3=1024
var height3=768
if (screen.width==width3||screen.height==height3)

var width4=1280
var height4=1024
if (screen.width==width4||screen.height==height4)


<p align="center">Ten Ton Web<br>
Screen Size Detection<br>
Please Stand By</p>

So, argmyster, are you completely confused now? ;-)

First step -- get rid of Publisher for web pages.
Second step -- learn a minimum of HTML, and get a real web editor.

Then you can decide how fancy you want to get with making things 'fit' the window...
id say that ure using the wrong software , try using simpler ones like eversoft 2000 etc ehich are easy to use and there's no resolution problems , just design the page , upload it and forget it.
argmysterAuthor Commented:
I'll go with this.  I am no longer using Publisher, it was just to get my site up and running as quickly as possible.

Thanks and I wish I could have given everyone some points, but this comments works best for me at this time.  Don't worry, I will be asking more questions and they will be worth the points.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now