rilevi lo screensize lato javascript
Codice PHP:
<script language="javascript">
function doLoad()
{
var screenSize;
if ((screen.width >= 1024) && (screen.height >= 768))
screenSize = "Large";
else if ((screen.width>=800) && (screen.height>=600))
screenSize = "Medium";
else
screenSize = "Small";
var element = document.getElementById("viewMode");
if (element != null)
element.value = screenSize;
}
</script>
<body onLoad="doLoad();">
<form id="form" action="[first pag to view]" method="POST">
<input name="viewMode" type="hidden" value=""/>
<form>
</body>
ti salvi in sessione la variabile screenSize e da li ci sono 2 scelte
o ti crei un unico css gestendo le varie diemnsioni:
Codice PHP:
.button, .buttonSmall, .buttonMedium, .buttonLarge
{
TEXT-ALIGN: Center;
FONT-WEIGHT: normal;
FONT-FAMILY: Arial;
CURSOR: hand;
COLOR: #000000;
}
.buttonSmall
{
FONT-SIZE: 9px;
HEIGHT: 15px;
WIDTH: 45px;
}
.buttonMedium
{
FONT-SIZE: 10px;
HEIGHT: 18px;
WIDTH: 65px;
}
.buttonLarge
{
FONT-SIZE: 12px;
HEIGHT: 20px;
WIDTH: 75px;
}
e nelle singole pagine imposti la classe con in coda la variabile di sessione
Codice PHP:
<p class="button<%= [variabile di sessione] %>">
o
ti fai n fogli di stile e li chiami
[nomeFoglioStile]Small.css
[nomeFoglioStile]Large.css
[nomeFoglioStile]Medium.css
e ri richiami nel codice cosi:
Codice PHP:
<LINK href="[nomeFoglioStile]<%= [variabile di sessione] %>.css" type="text/css" rel="stylesheet">