Script javascript: Caricare css diversi in base a risoluzione monitor

   difficoltà:  script script script script script

Script simili
13/9/2006


Ancora oggi i siti web vengono fatti per lo più per adattarsi a risoluzione 800x600, nonostante oggi la maggior parte degli utenti utilizzano una risoluzione di 1024x768.
Come creare un sito in modo tale che possa adattarsi alla risoluzione del monitor dell'utente sia esso a risoluzione 1024x768, sia esso a 800x600?
Una soluzione è usare tabelle in modo liquido, ma non è la soluzione ottimale.
La soluzione ottimale è creare due fogli di stile. Un css per i monitor a risoluzione 1024x768 e un css per monitor a risoluzione 800x600. Uno script in javascript leggerà la risoluzione del monitor e caricherà il foglio di stile adatto. Inoltre con questo script è possibile scegliere anche manualmente lo stile della pagina.

<html>
<head>
<title>Screen size</title>
<script language="JavaScript">
function Setstyle(size){
document.getElementsByTagName("link")[0].disabled = true;
document.getElementsByTagName("link")[1].disabled = true;
AW=screen.availWidth;
AH=screen.availHeight;
if(size==""){size="1024x768";}
if((AW<1024 && AH<768) || size=="800x600"){
document.getElementsByTagName("link")[1].disabled = true;
document.getElementsByTagName("link")[0].disabled = false;
}else{
document.getElementsByTagName("link")[0].disabled = true;
document.getElementsByTagName("link")[1].disabled = false;
}
}
</script>
<link rel="stylesheet" type="text/css" title="principale" href="800x600.css" />
<link rel="alternate stylesheet" type="text/css" title="alternativo" href="1024x768.css" />
</head>
<body onload="Setstyle('')">
<a href="javascript:Setstyle('800x600')">800x600</a>
<a href="javascript:Setstyle('1024x768')">1024x768</a>
<div class="content">contenuto</div>
</body>
</html>
I fogli di stile per esempio potranno essere:
800x600.css:
div.content{font-size:66px; border:3px solid #cccccc; width:700px;}
1024x768.css:
div.content{font-size:96px; border: 3px solid #000000; width:900px;}





Commenti


  Egidio

16/11/2007 12:13:32

Salve...
complimenti per la trovata, io utilizzavo altro metodo, ma questo riportato sembra più snello.
Avrei un problema...
se vado a validare la pagina mi riscontra un errore qui:
<a href="javascript:Setstyle('800x600')">800x600</a>

il simbolo: " dopo 800x600') mi da errore. come posso ovviare? saluti

  Giuordano

21/2/2012 14:40:47

ottimo, ma se dovessi aggiungere una terza opzione come dovrei modificare il codice? Grazie per una risposta.
Giordano



Lascia un commento


Codice di controllo*:
Nome*:
Email/Link:
Testo*:
 
I campi contrassegnati con * sono obbligatori.