css per smartphone e mobile usando media queries

Alessandro — Fri, 18 Nov 2011 14:51:36 +0000

Abbiamo un sito web. Lo abbiamo creato per il web quando nel web ci navigavano i PC con risoluzione video minima 1024×768 e lo abbiamo dotato di css, separando quindi il cosa visualizzare (html) dal come (css). Ora però il web viene navigato anche (e sempre di più) dagli smartphone la cui risoluzione video è quasi sempre 320x480px, oppure 480x800px. Con tali impreviste risoluzioni i contenuti del nostro sito appaiono troppo piccoli, costringendo i visitatori a usare spesso lo zoom e a spostarsi in continuazione tra una zona e un’altra del sito. Vogliamo mettere fine a queste difficoltà! Vogliamo rendere più agevole la navigazione del nostro sito agli smartphone, ma non abbiamo mai preso sul serio questa ipotesi perché, fino a qualche tempo fa, era praticamente necessario rifare buona parte del sito. Ora non più!

Da qualche tempo si sono infatti diffuse le così dette Media Queries. Esse, unite ai browser di nuova generazione, ci consentono di cambiare l’aspetto del nostro sito in automatico, senza javascript aggiuntivi… Il sito che stiamo leggendo le usa già adesso!
Ok, vediamo di capirci qualcosa…
Obiettivo: cambiare l’aspetto del nostro sito in base alla risoluzione video del dispositivo che lo naviga.
Per ottenere tale obiettivo possiamo procedere in diversi modi:

creare css diversi per dispositivi diversi
creare un solo css con, al suo interno, codice alternativo

In entrambi i casi la prima cosa da fare è aggiungere, nel tag delle nostre pagine, il seguente codice

Poiché scrivere tutto in un unico file css riduce il numero di http request necessarie per esaudire la richiesta del browser, noi useremo tale metodo. Apriamo quindi il nostro file.css e aggiungiamoci in coda il nostro codice condizionale con le Media Qeuries.
Facciamo un esempio chiarificatore (si spera).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

@media only screen and (min-width:150px) and (max-width:700px) {
body {
color:#000;
font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
font-size:12px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
width:100%;
}
#page {
width: 98%;
min-width: 310px;
margin: 0px auto;
padding: 0px 0px;
position: relative;
}
}
@media only screen and (orientation:portrait) and (min-width:321px) {
html, body {
width: 320px;
min-width: 310px;
margin: 0px;
overflow-x: hidden;
}
#page {
width: 320px;
min-width: 310px;
margin: 0px;
}
}
@media only screen and (orientation:portrait) and (min-width:481px) {
html, body {
width: 480px;
min-width: 470px;
margin: 0px;
overflow-x: hidden;
}
#page {
width: 480px;
min-width: 470px;
margin: 0px;
}
}

Il codice è volutamente semplice, al fine di mettere in evidenza lo stretto indispensabile.
Prendiamo in esame la prima riga del codice proposto:
@media only screen and (min-width:150px) and (max-width:700px)
e analizziamolo nei dettagli.
@media: indica al browser che da questo momento e fino alla prima parentesi graffa aperta verranno indicate le caratteristiche dei dispositivi ai quali dovranno essere applicate le regole presenti dopo la parentesi.
only screen: prima caratteristica dei dispositivi; ‘only’ serve solo a tenere buoni i vecchi user agent; la parola ‘screen’ invece indica tutti i dispositivi con schermo a colori (l’elenco completo dei dispositivi lo si può trovare nelle specifiche w3c css).
(min-width:150px): indica tutti i dispositivi con una risoluzione minima (larghezza) pari a 150px.
(max-width:700px): indica tutti i dispositivi con risoluzione massima (larghezza) pari a 700px.
Quindi il codice preso in esame indica tutti i dispositivi che abbiano contemporaneamente (and) le seguenti caratteristiche:

schermo a colori
risoluzione minima 150px
risoluzione massima 700px

Adesso il browser, istruito in tal modo, leggerà il codice css che dovrà applicare ai device che rientrano nelle caratteristiche indicate e lo applicherà diligentemente. Poniamo attenzione al fatto che in tali caratteristiche rientra anche lo schermo di un monitor PC con risoluzione bassa, oppure la finestra di un browser che viene ridimensionata sotto i 700px!!! Non ci crediamo? Se usiamo un browser diverso da internet explorer, proviamo a ridimensionare la larghezza della finestra mentre leggiamo questo articolo. Appena la larghezza della finestra scenderà sotto i 700px, avremo la conferma in diretta di quanto stiamo qui dicendo
Lo so che ci avete provato! Miscredenti! Fate bene…
Ma il codice non è finito…
@media only screen and (orientation:portrait) and (min-width:321px)
A cosa servono gli altri due @media che troviamo subito dopo? La risposta è tutta in questo codice:
(orientation:portrait).
Esso indica come bisogna comportarsi in caso di posizione verticale del dispositivo. A tale indicazione si aggiunge quella della risoluzione minima. Ossia, stiamo dicendo al browser che se il dispositivo è in posizione verticale e la sua risoluzione è di 320px deve ridurre le dimensioni della scchermata in modo da farla rientrare tutta nello schermo del dispositivo. Questa operazione è necessaria perché altrimenti passando dalla posizione orizzontale a quella verticale, le dimensioni delle pagine del sito non si rimpiciolirebbero.

Bene. Questo è quanto.
Per maggiori è più autorevoli dettagli facciamo sempre riferimento al W3C.

Sembra non esserci nessun articolo correlato a questo.

Internet explorer 5, 6, 7 e 8 contemporaneamente

Alessandro — Fri, 27 Nov 2009 17:03:09 +0000

In occasione del restiling di questo sito (a proposito, che ne dite?), ho avuto la necessità di testare il risultato del codice html e css sui diversi browser… Se non è difficile testare IEx, firefox, Opera, Safari, Chrome e altri, diventa molto più difficile testare il codice su più di un Internet Explorer contemporaneamente. Per fortuna ci sono almeno 2 soluzioni.

Applicazione stand-alone da installare sul proprio pc
Affidarsi alla virtualizzazione su altri server su cui visualizzare il risultato dei propri sforzi.

Nel primo caso andiamo qui:
http://www.my-debugbar.com/wiki/IETester/HomePage
scarichiamo l’applicazione e installiamola. Ha pure la localizzazione in italiano!
Ad oggi non è particolarmente stabile, ma fa quello che deve fare senza tirare troppi calci.

Nel secondo caso invece andiamo su questo sito:
http://spoon.net/browsers/
e seguiamo le istruzioni (in inglese).

Così facendo, ad esempio, ho potuto osservare che il codice html+css che ho scritto per questo sito NON era compatibile (proprio per niente) con IE6 Purtroppo quasi il 5% dei miei visitatori si presentano con questo browser e quindi, pur sapendo che i miei errori erano minimi se confrontati con la poca aderenza di IE6 agli standard W3C, sono corso ai ripari con un bel po’ do codice condizionale.
Prima che io apportassi le modiche sopra citate però, questo sito si presentava ai possessori di IE6 come mostrato dalla seguente immagine.

Se non avessi avuto un sistema per visualizzare sul mio pc quello che vedono i possessori di IE6, non avrei mai potuto risolvere tali problemi…

Sembra non esserci nessun articolo correlato a questo.

Alessandro Stella - Appunti di informatica » html

css per smartphone e mobile usando media queries

Internet explorer 5, 6, 7 e 8 contemporaneamente