Menú del website

• On Line (Web, intranet, extranet, ERP…)
• Off Line (Catálogos, exposiciones…)
• Interdixit (Quiénes somos y qué hacemos)
• Noticias (Nuestro saber y otras cosas)
• Contacto (Pregunta, opina, dinos…)

Suscripción RSS, seguimiento en Twitter y buscador interno

Tendencias Compatibilizar la visibilidad con ‘smartphones’ mediante filtros de CSS

La aparición de nuevos dispositivos móviles de navegación por Internet puede llevar a los administradores de webs tradicionales a realizar pequeñas modificaciones para que sean visibles desde estos sin que la apariencia parezca estropeada. El problema es la continua aparición de dispositivos con tecnologías distintas e interpretaciones diferentes del código de la página web. Una solución económica consiste en la generación de estilos en cascada (CSS) condicionales filtrados por la pantalla del dispositivo de destino.

El método implica la aplicación de ligeras modificaciones en la construcción de los estilos en cascada para que la navegación y usabilidad de la misma resulten las mejores posibles sin llevar a cabo ninguna inversión desorbitada. Por regla general se ampliarán los botones y se distanciarán físicamente los enlaces unos de otros para permitir la interacción en pantalla con los dedos y se eliminarán columnas flotantes para que se muestre la mayor parte del contenido en la pequeña pantalla vertical de un teléfono móvil.

Las modificaciones de código se incluirán al final del mismo archivo CSS —si sólo se utiliza uno— o en uno nuevo cargado en último término, ya que sólo incluirá las modificaciones de detalles sobreescribiéndolas.

Si se introduce el código en el mismo archivo CSS, cada instrucción debe ser filtrada por pantalla . Por ejemplo, el aumento de la altura de un botón input a 3 tamaños de la tipografía definida por la página sería, para la mayoría de dispositivos móviles (especialmente para el navegador Opera Mini):

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

Para los teléfonos iPhone —y para los iPod Touch— hasta el sistema 3 habría que añadir un nuevo filtro. Debajo del anterior podría incluirse:

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

En el caso del nuevo sistema operativo de los iPhone (iPhone 4) el código a incorporar sería:

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

Y para iPad el código a añadir bajo el anterior sería:

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

En estos dispositivos se permitiría así, en función del tamaño de letra, la interactuación con la yema de los dedos, sin presionar involuntariamente otros botones próximos.

Avisos y correo electrónico

Aviso legal y privacidad Accesibilidad y estándares Mapa del website
info@interdixit.com Interdixit © 2010