Page Size Detection

Posted on 2001-07-06
Last Modified: 2008-03-06
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.
Question by:argmyster

Expert Comment

ID: 6261140
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 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)
LVL 19

Expert Comment

ID: 6261218
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 (

Lots of web tutorials are at
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. ;-)
LVL 22

Expert Comment

ID: 6262248
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%>

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

LVL 19

Expert Comment

ID: 6262449
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... ;-)
LVL 53

Expert Comment

ID: 6262677
>>>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.

LVL 22

Expert Comment

ID: 6262810

like I said, it's not tested

Accepted Solution

TenTonJim earned 200 total points
ID: 6263185
Plug in the appropriate pages below...this means you nead to make multiple sites for different size 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 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>

LVL 19

Expert Comment

ID: 6263708
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...

Expert Comment

ID: 6268092
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.

Author Comment

ID: 6282577
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.


Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Diminish Pop-up  in 3 seconds 7 51
Button on Table, name table1 not working 4 22
message Alert on an empty search 10 23
CSS DIV Height in Percent 1 9
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question