Page-Details : Size Wisely

Patrick Hunlock Feb 7, 2007

General

Use this script in your onload events to kick-start your Web pages with the right relative font size. It checks the screen resolution (not the browser size) and sets the base 'em' size accordingly.

Notes

Created by: Patrick Hunlock
Web Site: http://www.hunlock.com/
Posted: February 7, 2007

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: sizeWisely.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Patrick Hunlock | http://www.hunlock.com/ */
function setStartingFontSize() {
  if (screen.width) {
    if (screen.width<600) {_baseSize = .8;}
    if ((screen.width>=600)&&(screen.width<=800)) {_baseSize = .8;}
    if ((screen.width>=800)&&(screen.width<=1000)) {_baseSize = 1;}
    if ((screen.width>=1000)&&(screen.width<=1100)) {_baseSize = 1.2;}
    if ((screen.width>=1100)&&(screen.width<=1300)) {_baseSize = 1.5;}
    if ((screen.width>=1300)&&(screen.width<=1500)) {_baseSize = 1.7;}
    if (screen.width>=1500) {_baseSize = 2;}
    document.getElementsByTagName("body")[0].style.fontSize=_baseSize+'em';
  }
}
setStartingFontSize();

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="sizeWisely.js"></script>

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details