Schriftskalierung in Abhängigkeit des Browserfensters?

**planepix** · 17.02.2010, 13:31

Hallo zusammen,

gibt es Tipps für und wider einer Schriftskalierung in Abhängigkeit des Browserfensters?
Meines Wissen nur in Flash möglich oder durch eine PHP-CSS-Kombination möglich - für Tipps bin ich dankbar.

**david enke** · 17.02.2010, 14:06

du kannst bei font-size doch mit %- oder em- Angaben arbeiten?

**planepix** · 17.02.2010, 14:09

Hallo David,

ja das kann ich. Die Vergrößerung findet aber nicht durch die Größenänderung des Browserfensters statt, sondern nur dann, wenn ein Benutzer die Ansicht ändert (oder mit STRG+ (Apfel+) die Seite vergrößert.

Die gewünschte Anforderung ist eine Skalierung des gesamten Inhalts auf die jeweilige Browsergröße

.

**david enke** · 17.02.2010, 14:13

ahh!
du meinst eine skalierung onresize...

das schreit verdächtig nach nem jscript.

**planepix** · 17.02.2010, 14:17

In Programmiererworten zusammengefasst: ja exakt so

Also such ich nach Javascripts...
Wenn Du einen Tipp hast: gerne

**david enke** · 17.02.2010, 14:23

Zitat von planepix

Wenn Du einen Tipp hast: gerne

als freudiger javascripter habe ich mich eben mal dran gemacht...

**planepix** · 17.02.2010, 14:26

Danke. Bin gespannt ob sich das realisieren lässt

**JanoschSkuplik** · 17.02.2010, 14:57

Hallo,

irgendwann mal hatte ich auch so etwas vor - ich hätte es mit JavaScript gelöst. Mein damaliger Stand:

Code:

<script type="text/javascript">
var normal_size = 13;
var min_size = 10;

window.addEvent('domready', function(){
$('top').setStyle('font-size',''+normal_size+'px');
});
window.addEvent('resize', function(){

if(!window.innerWidth)
{
//strict mode
if(!(document.documentElement.clientWidth == 0))
{
height = document.documentElement.clientHeight;
}
//quirks mode
else
{
height = document.body.clientHeight;
}
}
//w3c
else
{
height = window.innerHeight;
}

var new_size = height/40;
if(min_size <= new_size){$('top').setStyle('font-size',''+new_size+'px');}
else{$('top').setStyle('font-size',''+min_size+'px');}
});



</script>

Vielleicht lässt sich darauf ja was aufbauen. Wie gesagt - wurde damals nicht fertig entwickelt.

Gruß Janosch

**david enke** · 17.02.2010, 15:10

hab eben mal folgendes zusammengestellt:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title></title>
		<style type="text/css">
			html, body {
				height: 100%;
			}
			body {
				line-height: 500px;
				font-size: 500px;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript" charset="utf-8">
			var factor		= 100;
			var bodyEement	= document.getElementsByTagName('body')[0];
			var getHeight	= function() {
				return document.body && document.body.clientHeight ? document.body.clientHeight : window.innerHeight;
			}
			var resize		= function() {
				var result = (getHeight() * factor / 100) + 'px';
				bodyEement.innerHTML = result;
				bodyEement.style.fontSize = result;
				bodyEement.style.lineHeight = result;
			}

			window.onresize = resize;
			resize();
		</script>
	</body>
</html>

Allerdings wurden da noch nich alle browser getestet, läuft zumindest auf safari mac (damit vermutl. auch auf ff)