Sí. Fem servir un parell de cookies, i una ni tan sols és nostra. N’haurà d’acceptar-les per estalviar-se aquest missatge que ensenyem per imperatiu legal

“Compatibilitzar la visibilitat amb ‘smartphones’ mitjançant filtres de CSS”, notícia a Interdixit

Disseny + Desenvolupament. Multimèdia. Web. Comunicació. Grafisme. Art

Notícia: “Compatibilitzar la visibilitat amb ‘smartphones’ mitjançant filtres de CSS” de la secció Tendències

Compatibilitzar la visibilitat amb ‘smartphones’ mitjançant filtres de CSS

L’aparició de nous dispositius mòbils de navegació per Internet pot portar els administradors de webs tradicionals a fer petites modificacions per a fer-los visibles en aquests sense que l’aparença sembli malmesa. El problema és la contínua aparició de dispositius amb tecnologies i interpretacions diferents del codi de la pàgina web. Una solució econòmica és la generació d’estils en cascada (CSS) condicionals filtrats per la pantalla del dispositiu de destí.

El mètode implica l’aplicació de lleugeres modificacions en la construcció dels estils en cascada per que la navegació i la usabilitat siguin les millors possibles sense fer cap despesa desorbitada. Per regla general s’ampliaran els botons i s’allunyaran físicament els enllaços uns dels altres, per permetre la interacció en pantalla amb els dits, i s’eliminaran columnes flotants perquè s’ensenyi la major part del contingut en la petita pantalla vertical d’un telèfon mòbil.

Les modificacions de codi s’inclouran al final del mateix arxiu CSS —si només s’en fa servir un— o en un de nou carregat en últim terme, ja que només inclourà les modificacions de detalls sobreescrivint les generals.

Si s’introdueix el codi en el mateix arxiu CSS, cada instrucció ha de ser filtrada per pantalla. Per exemple, l’augment de l’alçada d’un botó input a 3 mides de la tipografia definida per la pàgina seria, per a la majoria de dispositius mòbils (especialment per al navegador Opera Mini):


 @media only all and (max-width:480px) {
    input[type="submit"] {
        height:3em;
    }
 }

Per als telèfons iPhone —i per als iPod Touch— fins al sistema 3 caldria afegir un nou filtre. A sota de l’anterior caldria incloure:


 @media only screen and (max-device-width:480px) {
    input[type="submit"] {
        height:3em;
    }
 }

En el cas del nou sistema operatiu dels iPhone (iPhone 4) el codi a incorporar seria:


 @media only screen and (-webkit-min-device-pixel-ratio:2) {
    input[type="submit"] {
        height:3em;
    }
 }

I per als iPad el codi a afegir sota l’anterior seria:


 @media only screen and (min-device-width:768px) and
  (max-device-width:1024px) {     input[type="submit"] {         height:3em;     }  }

En aquests dispositius es permetria així, en funció de la mida de lletra, la interactuació amb el rovell dels dits, sense pressionar involuntàriament d’altres botons pròxims.