Newsgroup: it.lavoro.professioni.webmaster
Titolo: Css per cellulari?

Qual'è l'impostazione corretta da dare a una pagina affinchè venga letta 
bene dai cellulari? (android, iphne etcc)
Ho trovato un sito che dice di aggiungere, alla normale chiamata del css 
<link src...., 
il codice 
media="(min-width:480px)"
Ma se sul computer sembra funzionare (quando riduco le dimensioni del 
browser mi cambia il css), sul cell (ho android) assolutemente non 
cambia nulla...
Come si fa allora?

 media="(min-width:480px)"
Questo dice "usa questo css per una larghezza minima di 480 pixel). 
Naturalmente se il tuo cellulare ha una risoluzione inferiore non lo 
usera`.
 
Bye.

 usera`.
Ho provato anche con 200px ma non mi pare avere effetto... 

 Ho provato anche con 200px ma non mi pare avere effetto...
Io uso una cosa del genere:
<link href="reset.css" media="" rel="stylesheet" type="text/css" >
<link href="main.css" media="" rel="stylesheet" type="text/css" >
<link href="1300.php" media="screen and (min-width: 1400px)" 
rel="stylesheet" type="text/css" >
<link href="960.php" media="screen and (min-width: 980px) and (max-
width:1399px)" rel="stylesheet" type="text/css" >
<link href="720.php" media="screen and (min-width: 481px) and (max-
width:979px)" rel="stylesheet" type="text/css" >
<link href="mobile.php" media="screen and (max-width:480px)" 
rel="stylesheet" type="text/css" >
Anche se in realta` sto abbandonando l'idea di fare un layout unico e 
diversi css per distinguere tra "layout orizzontale" (PC e tablet in 
landscape) e "layout verticale" (cellulari e tablet in portrait).
Bye.

 
Eh già, anch'io reputo che l'orientamento dello smartphone sia importante.
Ora per questa paginetta non mi interessa (è un'applicazione mia, che uso solo 
io... quindi devo capirci io :) ) ma per un sito intero credo che lo terrei in 
considerazione

 intero credo che lo terrei in considerazione
Piu` che l'orientamento, il fatto che su un desktop sei abituato a 
lavorare su 2 o 3 colonne, mentre su uno smartphone e` scomodissimo, 
quindi il layout va rivisto a colonna singola.
Diventa quindi complicato fare un layout "generico" che dica "la colonna 
di sinistra mettila subito dopo quella centrale, e quella destra per 
ultima prima del footer" se poi il cliente ti dice "nella pagina x, 
invece, mi metti la colonna di destra sopra il contenuto, ma chiusa, e 
che si apra al click".
A quel punto meglio gestire due layout diversi e amen. :)
Bye.

 rel="stylesheet" type="text/css" >
posso chiederti come mai non usi qualche strumento ad hoc tipo
compass/sass per generare questi css?



Sto valutando di usare less, ma per ora ho fatto cosi` perche` piu` o 
meno ottengo quello che voglio tramite php.
Quei css.php sono praticamente la definizione di un array e poi 
l'inclusione del css vero che pero` e` anche lui un php che visualizza le 
variabili:
Per esempio, 960.php e` questo:
/*
*	12 colonne da 60 pixel con 20 pixel di gutter e 10 pixel di margin 
laterali (tot 960)
*/
<?php
 header('Content-type: text/css');
 $s = array(
 	'baseFont' => 12,
 	'w' => 940,
 	'col' => 60,
 	'row' => 36,
 	'gutter' => 20,
 	'vgutter' => 12,
 	'margin' => 10,
 	'margins' => 20,
 	'cols' => array(
 		1 => 60,
 		2 => 140,
 		3 => 220,
 		4 => 300,
 		5 => 380,
 		6 => 460,
 		7 => 540,
 		8 => 620,
 		9 => 700,
 		10 => 780,
 		11 => 860,
 		12 => 940
 	),
 	'rows' => array(
 		1 => 36,
 		2 => 84,
 		3 => 132,
 		4 => 180,
 		5 => 228,
 		6 => 276,
 		7 => 324,
 		8 => 372,
 		9 => 420,
 		10 => 468,
 		11 => 516,
 		12 => 564
 	)
 );
 
 include('./included.css');
E questo e` un pezzo di included.css (lo stesso per tutti):
body
{
  font: <?php echo $s['baseFont']; ?>px/1.3 Verdana, Arial, 'Liberation 
Sans', FreeSans, sans-serif;
}
h1 {
  font-size: <?php echo $s['baseFont'] * 2.4; ?>px;
}
h2 {
  font-size: <?php echo $s['baseFont'] * 2.2; ?>px;
}
h3 {
  font-size: <?php echo $s['baseFont'] * 2; ?>px;
}
#page {
 width: <?php print $s['w']+$s['margins']; ?>px;
 margin: 0 auto;
 position: relative;
}
 #page #header {
  position: absolute;
  top: 0;
  left: 0;
  width: <?php print $s['w']+$s['margins']; ?>px;
  height: <?php echo $s['row']-$s['vgutter'];?>px;
  padding: <?php echo $s['vgutter']/2; ?>px 0;
 }

 meno ottengo quello che voglio tramite php.
beh un vantaggio di compass sul file php � sicuramente la minore
verbosit�, poi col watcher ti compila il css ad ogni salvataggio del
file, e se fai errori di sintassi te lo dice subito cos� correggi al
volo ancora prima di andare sul browser, pratico e comodo