Post by Screen Size
...use these to jump around or read it all
[Internal Page Choice]
Allow me to tell you a little about your monitor:
var width = screen.width
var height = screen.height
document.write("<B>You're set to "+width+ "X" +height+"</B>")
Cool, huh? But knowing this information goes well beyond simply making paranoid people think you're watching them through their computer screens. If you know the size of the person's monitor, then you can use that information to your advantage.
I get letters all the time asking me how to make pages look good on all size computer screens. I've offered some tips in the past, but it's still been a problem.
In this tutorial, I'm going to offer two scripts. One will act as a general, overall direction script. The user will be sent to a page designed for his or her screen. The second script will be an internal script that will write items to the page depending on the user's screen settings. Let's start with the Big One.
Redirection ChoiceThis little script works just like the traditional Browser Choice script. The script sits on a page by itself. The user logs into the page and, depending on their screen settings, the user is sent to a specific page made for their screen settings.
The script only checks the user's monitor width settings to make the choice. Since scrolling is common on the net, I don't see a need to check the height of the page.
You should, however, put Meta Commands to the page if you intend to submit it to search engines.
The script is set to test for the most common screen width settings: 1600, 1280, 1152, 1024, 800, 640, and those below 640. I talked to a few of my computer friends and they informed me that the chanced you'll run into a screen width setting that differs from this is quote small if there at all.
Let me give you the basic concept of the script.
if (screen.width == 1600)
Once equality is found then the line of code within the curly brackets is triggered. In all cases, that code created a link in the parent window (the top level window), and the hypertext link is enacted. The script is written so that at least one of the IF statements will be true.
Internal Page ChoiceOK, the page redirection is usually enough to solve the situation, but it also means that you have to create multiple pages. That's a bit of work, and for some things might be overkill.
Let's say you have an image that is 850 pixels wide. On 800 and 640 and below screen settings, that banner will roll off the screen and create a horizontal scroll bar. Not good. The easiest way to solve the problem is to create a 750px and a 630px version of the image for 800 ad 640px browsers. All you need is a script that will read the browser width settings and write the image code to the page so the correct image is posted. I happen to have such a script right here:
This script works on much the same format at the script we just played with, but I make a couple more assumptions. You'll notice the same general IF statement set up.
if (screen.width < 639)
if (screen.width == 640)
if (screen.width == 800)
if (screen.width >= 1024)
It starts with the monitor tests. If the monitor setting is less than 639, then the text "Hello there" is posted. My assumption is that a large image cannot be shrunk overly far so there comes a point where you post text rather than a smaller image.
Next, the text looks for 640, 800, and anything 1024 and above. Note the ">=". That means "greater than or equal to". If you want you can continue the "equal to" format for all of the screen sizes and create images for all. I just figured that once the screen was wide enough - why keep making images?
The real beauty of this kind of scripting is that you only need one page. On that page is a script that posts differing items due to conditions. It's a very clever deal. In fact, I feel it's so clever that I have a tutorial on just this topic right here.
What more can I say? You've got the tools now to make so that your pages fit the user's screen settings. Use it to make better, and better displaying, pages.
[Internal Page Choice]