Sito nel palmare

fabrizio23

Sito nel palmare

Ciao a tutti!
Ho un problemino...il mio sito web si vede su tutti i formati di monitor, grandi e piccoli ma sul palmare no...cioè si vede la testata ma ad esempio i vari menù si vede male (invece di vedere le semplici caselle con la loro normale dimensione, si vedono caselle lunghissime, e quindi devo scorrere il palmare praticamente all'infinito).

Spero di essermi spiegato, mi sapete dire dov'è il problema?

Grazie!

vnotarfrancesco

Ciao Fabrizio, quando scrivi che si vede bene su tutti i formati di monitor in tendi per Pc, quindi parliamo dai 15" (se esistono ancora) in su, mentre un palmare o un dispositivo palmare va dai 2,8" (a volte anche meno) ai 3,5" fino ad un massimo di 10" (Ipad).
Quindi il primo problema potrebbe essere proprio l'adattamento del tuo css a dimensione così piccole.

L'altra differenza è invece proprio il motore di rendering del browser che in base al palmare che utilizzi come campione può essere più o meno efficiente a rappresentare le tue pagine.
Ci sono browser come Safari su Ios o quello su Android che sono in grado di fare un ottimo lavoro, mentre ad esempio quello su Blackberry (Os 6 escluso) ha molte difficoltà a mostrare un sito pensato per il desktop.

Valerio Notarfrancesco

fabrizio23

Grazie Francesco!

Il mio è android...quindi che dovrei fare?

fabrizio23

Francesco, ho visto adesso che si visualizza bene anche sull'8.9 pollici, sì prima intendevo 15 fino al 21 pollici (almeno quelli che ho provato) ma sul palmano no (mi sembra sia 3.5 pollici).
Gira su android, spero si possa fare qualcosa perchè spesso mi devo collegare e così è praticamente impossibile.

vnotarfrancesco

Dovrebbe quindi essere un problema di adattamento del sito alle dimensioni dello schermo, quindi ti consiglio di lavorare sul css.

Io vedo due strade, puoi impostare i css attuali in modo che si adattino in modo fluido al variare delle dimensioni dello schermo, oppure puoi associare alla pagina più css con delle regole in modo che in base alle caratteristiche dello schermo venga mostrata la pagina con il css per il desktop oppure con il css per i dispositivi mobili.
Per quest'ultima strada, cioè associare più css alla pagina, dai un'occhiata a come funziona la proprietà media query qua.

Valerio Notarfrancesco

fabrizio23

@vnotarfrancesco said:

Dovrebbe quindi essere un problema di adattamento del sito alle dimensioni dello schermo, quindi ti consiglio di lavorare sul css.

Io vedo due strade, puoi impostare i css attuali in modo che si adattino in modo fluido al variare delle dimensioni dello schermo, oppure...

Valerio Notarfrancesco
Questa mi sembra la strada più facile Francy, ma non ho idea di come si possa fare. Mi puoi dare una mano per favore?

vnotarfrancesco

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

fabrizio23

Grazie Valerio

Devo aggiungere questo:

in un punto qualsiasi della home page...intendo dire subito sotto tutti i metatag?

Su internet ho trovato questo:
devo mettere anche questo?

vnotarfrancesco

Li inserisci nella sezione head del file html al posto dell'istruzione simile che adesso collega il css sempre (<link rel='stylesheet' ... />).

Valerio Notarfrancesco

fabrizio23

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

Tu non scappare eh!

fabrizio23

@vnotarfrancesco said:

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