Valutazione discussione:
  • 0 voto(i) - 0 media
  • 1
  • 2
  • 3
  • 4
  • 5
Controllare larghezza pagina
#1
Ciao Mattia,
la home page che sto sviluppando ha una larghezza di 1280px...
è possibile fare un controllo che verifichi la risoluzione utilizzata dai pc del navigatore ed, se eventualmente bassa (ad esempio 800x600 o 1024x768), visualizzare il sito che so... all'80%??

Visto che stiamo progettando anche i layout di Iphone e Ipad... come sarà possibile fare in modo che in base al dispositivo si vedrà un layout piuttosto che un altro?? Sarà possibile anche farlo funzionare sia in versione orizzontale che verticale (tipico dell'iphone)

Attendo delucidazioni

Saluti
Cita messaggio
#2
La tecnica che allarga o stringe un sito in base alla risoluzione del browser si chiama responsive design.
Per le risoluzioni più grandi (dai tablet in su) si potrebbero utilizzare le percentuali invece dei pixel come unità di misura. In questo modo il layout avrebbe sempre la stessa forma e si adatterebbe alla larghezza disponibile.
Ci sarebbe, però, il problema degli smartphone che hanno una risoluzione troppo bassa per visualizzare, per esempio, un layout a due colonne. In questo caso un menù laterale sarebbe meglio spostarlo sopra o sotto il contenuto principale o nasconderlo del tutto.
Per fare tutto questo puoi utilizzare le media query del CSS (la novità che serve in questo caso è stata introdotta con i CSS3), utilizzando il parametro media dei tag link e style che specifica quale foglio di stile utilizzare in base al dispositivo che utilizza il visitatore.

Nelle versioni precedenti del CSS questo parametro veniva utilizzato per compiti più semplici (come, ad esempio, per stabilire se si trattasse di una stampa).
Il tag link per includere sempre un file CSS è il seguente:
Codice:
<link rel="stylesheet" href="style.css" />

Se, invece, lo si vuole includere solo per la stampa:
Codice:
<link rel="stylesheet" href="style.css" media="print" />

I valori che può assumere il parametro media sono i seguenti:
  • "all": è equivalente a non inserirlo perché viene visualizzato da tutti;
  • "screen": viene visualizzato dal browser;
  • "print": viene visualizzato solo in fase di stampa;
  • "projection": viene visualizzato nelle presentazioni;
  • "aural": viene visualizzato dai browser a sintesi vocale;
  • "braille": viene visualizzato dai dispositivi basati sull'uso del braille;
  • "embossed": viene visualizzato dalla stampanti braille;
  • "handheld": viene visualizzato dagli smartphone;
  • "tty": viene visualizzato dai dispositivi a carattere fisso;
  • "tv": viene visualizzato sui televisori.

Con i CSS3 vengono inseriti nuovi valori che si possono combinare. Per esempio, se vuoi visualizzare un file CSS solo per i dispositivi da 800 pixel fino a 1024 di larghezza, puoi utilizzare:
Codice:
<link rel="stylesheet" href="style.css" media="all and (min-width: 800px) and (max-width: 1024px)" />

La stessa media query può essere utilizzata all'interno del file CSS in questo modo:
Codice:
@media screen and (min-width: 800px) and (max-width: 1024px) {
/*Istruzioni varie*/
}

Non è obbligatorio utilizzare una larghezza minima o massima, ma anche solo una delle due. Quindi per gli smartphone, se non sbaglio le dimensioni, la media query sarà:
Codice:
@media screen and (max-width: 320px)

Oltre a min-width e max-width ci sono moltissime altre condizioni che si possono utilizzare.
Mattia!
Cita messaggio
#3
Grazie per le delucidazioni!!
Questo discorso mi interessava principalmente per il problema delle diverse risoluzioni (visto che all'attualità sono sempre meno utilizzate le 800x600 e 1024x768).
Per iPhone e iPad, invece, stiamo facendo dei template ad hoc che verranno visualizzati solo dai dispositivi... dici che la soluzione migliore è sempre media query??

Saluti
Cita messaggio
#4
Dipende da quanto saranno diversi i layout per iPad e iPhone. Se sono completamente diversi da quello del sito principale, allora ti conviene fare anche l'HTML diverso (potresti poi utilizzare un dominio "m.sito.com" per il sito mobile).
Se sono molto simili, ti conviene fare qualche valutazione sulle media query.
Mattia!
Cita messaggio


Discussioni simili
Discussione Autore Risposte Letto Ultimo messaggio
  Creare una pagina con totale follower di più social Chandler 19 542 21/11/2023 08:41
Ultimo messaggio: Mattia
  rendere responsive pagina web app Chandler 41 109.117 17/01/2015 01:55
Ultimo messaggio: Chandler
  rendere pagina responsive Chandler 2 7.283 13/12/2014 21:55
Ultimo messaggio: Chandler
  [SEO] Titolo pagina giancarlo 1 5.225 17/12/2013 07:31
Ultimo messaggio: Mattia
  [CSS] Controllare regole inutilizzate Mackenzie 2 8.564 12/04/2013 12:30
Ultimo messaggio: Mattia
  Come creare una semplicissima pagina HTML! Naroku95 0 3.991 31/10/2011 13:48
Ultimo messaggio: Naroku95
Exclamation Problema di visualizzazione pagina (animatedcollapse e jquery-1.4.3.min) turbogiangi 7 22.471 29/11/2010 09:07
Ultimo messaggio: Mattia
  Pagina di Benvenuto (Entra o Esci) veeto 3 12.875 02/12/2008 10:06
Ultimo messaggio: Mattia

Vai al forum:


Utenti che stanno guardando questa discussione: 1 Ospite(i)