Paolo De Feo
a- a+

Siti web mobili per cellulari e tablet pc come iPhone, Android o iPad con CSS3

Vediamo cosa sono e come utilizzare le CSS3 Media Queries. Ecco alcuni esempi.

Uno degli scogli più aguzzi dello sviluppo web è rappresentato dal rendere compatibile il prodotto da creare per ogni browser e dispositivo mediatico di fruizione (Desktop monitor, tablet PC, smartphone, eccetera). In tempi passati non erano rari i siti nel cui footer veniva indicato “sito ottimizzato per browser X e Y ad una risoluzione massima X e Y”. Il ridisegno degli standard e dei browser stessi ha permesso di migliorare sensibilmente la situazione, anche se alcune problematiche persistono.

Una delle soluzioni di bypass del problema visualizzazione è rappresentata, di solito, dalla creazione di un sito ad hoc ottimizzato per dispositivi mobili: attività spesso dispendiosa in termini di tempo e risorse. Tuttavia, è possibile usare alcuni “trucchi” che permettono un risparmio in termini di codifica.

Stiamo parlando delle CSS3 Media Queries, una tecnica che consente di “riconoscere” il media operativo in quel momento e di impostare  o caricare delle regole CSS precise settate in precedenza, richiamate dai fogli di stile appositamente creati per ogni strumento di riproduzione (un CSS per i tablet, uno per gli smartphone, un altro per i monitor PC eccetera).

Il primo modo di usare le CSS3 Media Queries è la creazione di un markup alternato nel foglio di stile, specificamente creato per una risoluzione. In particolare:

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
  body { background: black; }

} // Un css per una risoluzione smartphone, dove max-width controlla la dimensione dell’area visibile e max-devixe-widht controlla la risoluzione

Ora, salviamo il nostro foglio di stile dedicato, implementiamolo in HTML tra i tag <head><head/> e indichiamo in quali condizioni caricarlo, ben specificate dal tag “media”:

<link href='cartella-stili/css-per-smartphone.css' media='only screen and (max-width: 480px), only screen and (max-device-width: 480px)'
rel='stylesheet' type='text/css'>

Al markup creato sopra possiamo aggiungere il meta tag “viewport”:

<meta name="viewport" content="width=device-width" />

Serve a “garantire” l’ottimizzazione per iPhone.



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Pier Paolo
Condividi le tue opinioni su questo articolo!