Sito nel palmare

fabrizio23

Appena ho un secondo li inserisco e vediamo. Speriamo bene!

Tu non scappare eh!

fabrizio23

Valerio, non Francesco

Potresti iniziare da qualcosa di simile
<link rel='stylesheet' media='screen and (min-width: 481px)' href='desktop.css' />
<link rel='stylesheet' media='screen and (max-device-width: 480px)' href='mobile.css' />

In base alla risoluzione dello schermo dai l'istruzione al browser di usare il css per desktop, quello attuale, oppure il css per dispositivi mobili. Per provare può essere anche un file css vuoto.
Magari per android non trovi molti esempi per il media query, ma per Iphone ne trovi tanti e vanno bene anche per Android, perché il mio esempio è minimalista e dovresti gestire anche l'orientamento (orientation:portrait / landscape).

Valerio Notarfrancesco
Eccomi di nuovo
Ma devo cambiare i px per caso? Siccome non è successo nulla...tutto come prima...se sì a quanto li devo mettere?
Grazie!!!

vnotarfrancesco

Ciao Fabrizio,
Io non scappo, ma poi oltre a me ci sono anche tutti gli altri utenti del forum gt.

Allora, Io ho dato per scontato che la tua pagina html avesse gli stili css in uno o più file esterni (External Style). Se non è così, se ha gli stili dichiarati nella sezione head (Internal Style) il metodo da me proposto va modificato. C'è ancora un'altra possibilità, ovvero quello degli attributi di stile dichiarati nei tag html (Inline Style); in questo caso bisognerebbe riscrivere tutti gli stili portandoli fuori e il lavoro potrebbe essere davvero enorme e forse a questo punto sarebbe meglio valutare altre strade.

Ipotizziamo che la tua pagina usi gli stili esterni, quindi nella sezione head hai già una dichiarazione
<link rel="stylesheet" type="text/css" media="screen" href="nome_del_file.css" />.

Per usare il metodo media query delle specifiche CSS 3 basta inserire delle condizioni che delimitano l'uso di un file esterno in base alle caratteristiche che hai specificato. Quindi nel collegamento al file css esterno già presente, quando nella proprietà media già imposti che vuoi che venga usato per lo schermo aggiungi la dimensione dello schermo, media='screen and (min-width: 481px)'
L'istruzione completa diventa <link rel='stylesheet' media='screen and (min-width: 481px)' href='nome_del_file.css' />

A questo punto, se provi a ridimensionare la finestra del browser, dovresti vedere che quando le dimensioni vanno sotto la larghezza di 481px non viene più applicato il css (non gli abbiamo detto quale css usare per le dimensioni inferiori) e vedi solo il contenuto senza stile.

Quando vedi che ridimensionando la finestra viene applicato il css in base alla regola della dimensione dello schermo, puoi provare a duplicare il file css che usi, lo rinomini ad esempio chiamandolo mobile.css e gli cambi magari solo il colore dello sfondo del background in rosso.
Inserisci nel file html il collegamento a questo css con la regola che deve essere associato solo quando le dimensioni sono sotto i 481px.
A questo punto ridimensionando la finestra del browser vedi che lo sfondo della pagina diventa rosso quando la finestra va sotto i 481px.

Alla tua domanda se devi cambiare il numero dei px, si, hai ragione, dovrai scegliere i valori in base al tuo dispositivo mobile, Io ho riportato i valori di un Iphone. Ho sbagliato anche a scrivere l'istruzione per controllare la risoluzione massima, quella corretta da usare è
<link rel='stylesheet' media='screen and (max-width: 480px)' href='mobile.css' /> perché max-device-width che ho indicato prima è specifica per Iphone.

Valerio Notarfrancesco

fabrizio23

Grazie Valerio!

Sì sì il mio style è interno...quindi se non ho capito male creo una cartella CSS ma dentro ci devo solo scrivere:

oppure mettere tutti i margini, dimensioni eccetera?

Scusami Vale, ma è il mio primo impatto con CSS

Grazie!

vnotarfrancesco

Vediamo, ci provo. Ho preparato alcuni esempi così è più facile.
Copia e incolla il testo sotto in un file vuoto e poi lo salvi con nome index.html.
@index.html said:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="Description" content="" />
<meta name="Keywords" content="" />
  <title>Titolo</title>
  <link rel='stylesheet' media='screen and (min-width: 481px)' href='desktop.css' />
  <link rel='stylesheet' media='screen and (max-width: 480px)' href='mobile.css' /> 
</head>
<body>
<div>
<p>Ciao Mondo</p>
</div>
</body>
</html>

Copia e incolla il testo sotto in un file vuoto e poi lo salvi con nome desktop.css.
@desktop.css said:

body {background-color:#b0c4de;}

Copia e incolla il testo sotto in un file vuoto e poi lo salvi con nome mobile.css.
@mobile.css said:

body {background-color:red;}
I tre file si devono trovare tutti nella stessa cartella, altrimenti nel file html, dove ci sono le istruzioni link rel='stylesheet' devi personalizzare il percorso.

Se apri adesso il file html con il browser (io ho provato con Safari, Firefox e Chrome), anche in locale, e provi a ridimensionare la finestra con il mouse, vedrai che quando la finestra diventa più corta di 480 pixel, il colore dello sfondo cambia.

Quello che avviene è che il browser va a prendere il foglio di stile desktop.css oppure mobile.css in base alla dimensione della finestra.
Riesci a vedere l'effetto?

Valerio Notarfrancesco

fabrizio23

Ciao Valerio, scusami l'assenza ma sono stato in vacanza e pensavo che con il palmare fosse facile rispondere al forum invece non mi faceva inserire la risposta.

Ti ringrazio moltissimo per la risposta, appena ho un attimo lo provo!

Non sò se sia rilevante ma ho scoperto che quando il palmare carica il sito, il menù non impazzisce allungandosi tantissimo, impazzisce quando ha terminato il caricamento della pagina. Tutte le altre pagine (dove menù non c'è) vanno alla perfezione...boh?

Ora vediamo...Grazie ancora, vi faccio sapere

fabrizio23

Ho messo nella pagina index.html del mio sito questo:

E poi ho salvato in due cartelle separate desktop e mobile.css ma non ho ottenuto nessun risultato.
Mi chiedevo, siccome nel caricamento il menù è perfetto, solo dopo il caricamento si allunga con 2500 caselle non è che il problema sia proprio nei menù?

vnotarfrancesco

Attenzione, le 3 pagine, index.html, desktop.css e mobile.css vanno nella stessa cartella e non in due cartelle separate.

Nel mio esempio non c'è nessun menu, forse tu ti riferisci alle tue pagine. Ci sono diversi modi per costruire un menu, può ad esempio essere fatto con i css e in questo caso risolvi con il media query, oppure può essere realizzato in un altro modo, ad esempio in javascript e nel qual caso dovresti vedere di adattare il codice alle esigenze del palmare.

Valerio Notarfrancesco

fabrizio23

Grazie Valerio! Ho visto che con i css non risolvevo nulla, allora ho rifatto l'homepage da capo e ho visto dove stava l'errore: praticamente un menù che avevo caricato mi mandava in tilt tutto, il perchè non lo sò...allora l'ho rimosso e messo un'altro, ora tutto giro ok!

Grazie per la tua disponibilità Valerio

vnotarfrancesco

Sono contento che tu abbia risolto.

Valerio Notarfrancesco