CSS specifico per mobile, possibile?

[AltF4]

Ciao a tutti, vorrei realizzare un sito che sia compatibile con i dispositivi mobile, pensavo di far caricare un apposito CSS se l'utente che accede al sito utilizza uno smartphone o un tablet, ma provando in questo modo non mi riesce:

<link rel="stylesheet" media="handheld" href="mobile.css" />

<link rel="stylesheet" media="screen" href="pc.css" />

Così facendo non dovrebbe caricare l'apposito CSS sulla base del dispositivo utilizzato?

[fcaldera]

da http://www.quirksmode.org/blog/archi..._mobile_1.html

Handheld stylesheets

@media handheld, which is supposed to allow you to define special style rules for mobile devices, is supported only in mobile mode; and not in desktop mode. As far as I’m concerned Opera has made a mistake here: the device is a mobile phone, therefore @media handheld should be supported in both modes.
In the current situation Opera denies web developers the opportunity of optimising their sites for mobile phones, and it also denies there’s any difference between wide, spacious computer screens and narrow, cramped phone displays. I feel it’s wrong on both counts.
More in general, the handheld media type is useless right now. Apart from the Opera problems WebKit and Blackberry don’t support it, and only one out of three tested NetFronts does.
IE supports it, but it supports @media screen simultaneously. Although IE has been much reviled for this support, I think that in practice it’s not so bad. You can still use handheld stylesheets as an overrule for normal stylesheets, and that may be enough to help your mobile users.

[AltF4]

da http://www.quirksmode.org/blog/archi..._mobile_1.html

Ti ringrazio! Da quello che leggo è abbastanza inutile, se non del tutto..

Quindi non esiste un modo per creare una condizione del tipo:

se si tratta di un dispositivo mobile carica mobile.css

se invece si tratta di un dispositivo desktop carica desktop.css

?

[PikNuke]

Puoi usare i media in un unico css. Esempio pratico:

/*--- PHONE VERSION ---*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
esempio {
font-size:18px;
etcetc
}
}

/*--- DESKTOP VERSION ---*/
@media only screen and (min-width: 481px) {
esempio {
font-size:12px;
etcetc
}
}

e cosi via, puoi creare varie dimensioni, con min e max width!

[AltF4]

Puoi usare i media in un unico css. Esempio pratico:

e cosi via, puoi creare varie dimensioni, con min e max width!

Ti ringrazio per la risposta, ho provato e dovrebbe funzionare correttamente!

Ma tornando alla domanda precedente e cioè se è possibile creare una condizione direttamente nella pagina web ed avere così 2 css separati, facendo nel modo che segue ho la stessa garanzia di funzionamento oppure no?

  <link href="desktop.css" rel="stylesheet" type="text/css">
  <link href="mobile.css" rel="stylesheet" type="text/css" media="all and (min-width: 0px) and (max-width: 1023px)">