Script javascript: Caricare css diversi in base a risoluzione monitor
difficoltà:
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>I fogli di stile per esempio potranno essere:
<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>
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;} 
Permalink:
Tag:
Script Simili:
Script ajax: Caricare su Google maps coordinate da xml o feed rss con georss
Script ajax: Esempio base ajax
Script ajax: Esempio base ajax con scriptaculous
Script php: Caricare e Scaricare file via ftp con php
Script ajax: Esempio base ajax con ahah
Script ajax: Esempio base ajax
Script ajax: Esempio base ajax con scriptaculous
Script php: Caricare e Scaricare file via ftp con php
Script ajax: Esempio base ajax con ahah
Link utili:
Vota:
Feed Rss
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