Change text size according to browser resolution

Forum Moderators: not2easy

Message Too Old, No Replies

Change text size according to browser resolution

carterlangley

6:23 pm on Feb 13, 2010 (gmt 0)

Hi guys,

First post here. I need to be able to change the size of the text on the website according to the resolution of the visiting browser. Can this be done using CSS?

Thanks
Carter

rocknbil

7:27 pm on Feb 14, 2010 (gmt 0)

Welcome aboard carterlangley, the short answer: no.

You'd need to get the browser info via Javascript and use that to adjust your sizes. This is not a great idea anyway, as the user's settings will easily override it.

bzgzd

7:48 pm on Feb 14, 2010 (gmt 0)

Interesting is that with using JavaScript it is possible to change also what css file is used.

Somewhere I found this code:

<html>
<head>
<link id="stylesheetLink" rel="stylesheet" href="#" />

<script language="JavaScript">
var smallStylesheetLink = "small.css";
var normalStylesheetLink = "normal.css";

function setStyle() {
var width, height;
if(window.innerWidth) {
width = window.innerWidth;
height = window.innerHeight;
}
else if(document.documentElement.clientWidth) {
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
}
else if(document.body.clientWidth) {
width = document.body.clientWidth;
height = document.body.clientHeight;
}
var stylesheetLink = document.getElementById("stylesheetLink");
var useSmall = (width <= 800 && height <= 600);
stylesheetLink.setAttribute("href", (useSmall ? smallStylesheetLink : normalStylesheetLink));
}

setStyle();
</script>
</head>

<body>
<h1>Using Different Stylesheets</h1>
</body>
</html>

Where small.css contains: body { background: red; }
and normal.css: body { background: blue; }

So it loads page with red background if browser window is small or with blue background if browser is larger.

carterlangley

10:32 pm on Feb 14, 2010 (gmt 0)

Thanks guys!
That java code looks like something I can use. Will give it a go and see what it does to the site.

Thanks again!
Carter

swa66

10:52 pm on Feb 14, 2010 (gmt 0)

CSS3 media queries are intended to solve this without any need for JavasScript.

IE -as usual- doesn't support it (including IE8), most other browsers do support it properly.

Old_Honky

5:12 pm on Feb 15, 2010 (gmt 0)

perhaps this is too obvious, but why not just design a fluid site with text in ems or percentages?

carterlangley

6:24 pm on Feb 15, 2010 (gmt 0)

Old_Honky
I am very new to website design, so "fluid site" and "ems" mean nothing to me at the moment. I design in FrontPage as that is what I have available to me. So if you explain fluid site and ems I would be very gratefull!

Old_Honky

2:18 pm on Feb 16, 2010 (gmt 0)

If you design your site using percentages instead of pixel or point sizes then it will expand or contract to fit the browser window. With font sizes you can use percentages or ems (1em =100%. 1.2em =120% etc). If you type the words "fluid site" or "liquid site" into a search engine you will find more information.