Ben's Hobbyhoekje -- Het object Screen gebruiken

Het object "Screen" gebruiken

Soms is het nodig om de lezer van je website te adviseren bepaalde beeldscherminstellingen te kiezen, zodat de inhoud van je site goed overkomt. Daarvoor is het nodig te weten hoe het beeldscherm van de bezoeker van je website staat ingesteld, zodat je een melding kunt geven als dat nodig is.
Hier staat beschreven hoe je de beeldscherminstellingen kunt detecteren en gebruiken.

Één van de standaard-objecten binnen JavaScript is "Screen". Dit kun je gebruiken om informatie over het beeldscherm op te vragen en weer te geven. Zo geldt voor het beeldscherm van deze PC:

Alleen bij Microsoft Windows kan een effectief beschikbare afmeting afwijken van een schermafmeting door de taakbalk. Op mobiele apparaten moet je er rekening mee houden dat de beschikbare afmetingen een factor 1,5 tot 2,0 te laag worden gerapprteerd.

Behalve het hierboven genoemde bestaan er binnen de verschillende browsers nog eigen uitbreidingen die hier onbesproken blijven. Het object Screen maakt geen deel uit van het Document Object Model (DOM) van HTML, CSS en /of JavaScript, omdat het een object is van de browser zelf.

De volgende tabel geeft aan hoe je binnen JavaScript over de gegevens kunt beschikken (Let op de Hoofdletters):

Merk op dat het hier gaat over afmetingen van het scherm, niet over de afmetingen van het window dat op het scherm staat.
Als je iets wilt doen met de afmetingen van het window waarin de webpagina staat moet je gebruik maken van:
- Bij Internet Explorer 9 en eerder: document.body.clientHeight en document.body.clientWidth.
- Bij andere browsers (mits up-to-date): window.innerHeight en window.innerWidth.
Dit wordt besproken in het item: "Plaatje aanpassen aan de grootte van het window".
Een voorbeeld van het gebruik van "screen" is te vinden op het voorblad van deze website. Daar vind je onderstaande knop. Als je er op klikt verschijnt er een window dat precies 90% is van de breedte van het scherm en 70% van de hoogte.
Dit werkt alleen als je browser staat ingesteld om nieuwe pagina's te openen in een nieuw venster. Anders verschijnt de pagina gewoon in een nieuw tabblad.
Het script werkt als volgt:
- Er wordt een window gemaakt met afmetingen w = 0.9*screen.availWidth en h = 0.7*screen.availHeight.
- Langs de randen van scherm blijft (100%-90%) / 2 = 5%, respectievelijk (100%-70%) / 2 = 15%, vrij. De breedte van de rand links en rechts is w / 90% * 5% = 5/90 w = w/18. Het window staat hiermee netjes horizontaal gecentreerd.
  Het window staat verticaal niet gecentreerd. De bovenrand is h/14 pixels breed. Deze waarde is gekozen omdat het er dan mooi uitziet...
- De positie van de linkerbovenhoek van het nieuwe window wordt op deze waarden ingesteld.
De code van dit voorbeeld kun je downloaden, inclusief de plaatjes. Zie onderaan deze pagina.
De techniek om de plaatjes te laten veranderen wordt beschreven in het item "Plaatje laten veranderen als de muis erover gaat".

Gebruik:

De code staat voor een deel in de <HEAD> en voor een deel in de <BODY>.

De code ziet er als volgt uit:

(Zet dit JavaScript bij voorkeur in de <HEAD>)

<script>
// Button Laatste Nieuws, Weer & Verkeer
Nieuws1 = new Image(); Nieuws1.src="handig1.gif"
Nieuws2 = new Image(); Nieuws2.src="handig2.gif"
function NieuwsD() { document.images["Nieuws"].src = "handig2.gif" }
function NieuwsU() { document.images["Nieuws"].src = "handig1.gif" }
function NieuwsC() {
var w = 0.9*screen.width, l = w/18;
var h = 0.7*screen.height, t = h/14;
MijnVenster = window.open("bbnieuws.htm","",
"top="+t+",left="+l+",toolbar=yes,location=yes,directories=yes,status=yes,"+
"menubar=yes,scrollbars=yes,resizable=yes,width="+w+",height="+h)
}
</script>

(Zet deze code in de <BODY>, op de plaats waar het plaatje met de link moet komen)

<img name="Nieuws" src="handig1.gif" width="175" height="55"
border="0" alt="Onmisbaar op internet!"
onMouseOver="NieuwsD()" onMouseOut="NieuwsU()" onClick="NieuwsC()">

Downloaden:

Druk op de knop: File: voorb090.zip, 3761 bytes.

Opmerking:

Behalve met de instellingen van het beeldscherm heb je natuurlijk ook te maken met de gebruikte browser en soms zelfs met het gebruikte besturingssysteem. Zie daarvoor het item Het object "Navigator" gebruiken.