Actualmente tengo lo siguiente en mi documento HTML.Cómo utilizar el atributo de medios para dispositivos de mano de la etiqueta HTML Link?
<link REL=StyleSheet HREF="/stylesheets/home.css" TYPE="text/css" MEDIA=screen>
<link REL=StyleSheet HREF="/stylesheets/homedark.css" TYPE="text/css" MEDIA=handheld>
Sin embargo, nada cambia en un dispositivo de mano (mi teléfono Android). ¿Hay algo que estoy haciendo mal, o simplemente no es así de simple?
Usted tendrá que utilizar más avanzados medios consultas, tales como los que se dirigen screen size
Así que algo más como
<link rel="stylesheet" href="/stylesheets/homedark.css" type="text/css"
media="screen and (max-device-width: 480px)">
Dentro de su hoja de estilo, sería algo como esto
@media only screen and (max-device-width: 480px) {
//Your styles here
}
http://www.w3.org/TR/css3-mediaqueries/
simple detección de dispositivos JS podría ser útil:
if(navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/webOS/i) ||
navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPod/i)){
// link to stylesheet
}
Una mejor que puede hacer es utilizar algún tipo de combo ... medios consulta & detección del dispositivo/función.
Este es un buen resumen: http://www.csskarma.com/presentations/cssla/slides/mobile_media_touch.pdf (ADVERTENCIA: archivo pdf)
Quizás su teléfono no se considere una computadora de mano según los criterios que utilice el W3C para ese término. Los navegadores móviles modernos no son tan diferentes de los de una computadora de escritorio en toda regla y no son tan limitados como los navegadores WAP originales (inútiles) en dumbphones. Por lo general, no es necesario generar un tipo de "dispositivo de bolsillo" ya que el navegador del teléfono es mejor para decidir qué contenido mostrar o cómo mostrarlo que el sitio.
Según w3schools el tipo de soporte de mano es obsoleto de todos modos. Tendrá que usar consultas de medios para lograr lo que quiere.
Lástima que no hay un tipo de medio para "teléfono". La capacidad de marcar un número es realmente la diferencia más distintiva.
Entonces, ¿cuál es una mejor manera de hacer esto? Supongamos que mi sitio se mostrará bien en un dispositivo móvil (se muestra bien, pero tengo una hoja de estilo específica para dispositivos móviles escrita que facilitará la navegación) o use un método diferente para seleccionar hojas de estilo. – muttley91
La mayoría de los sitios usan el rastreo del navegador para descubrir qué CSS se debe publicar. También podría tomar algunas decisiones aproximadas basadas en la IP de origen, que capturaría a los usuarios móviles que usan datos móviles (pero no a los usuarios de teléfonos inteligentes con wifi). –
Twitter bootstrap usa el ancho del dispositivo para ver qué dispositivo está usando el usuario. Puedes ver esto: http://twitter.github.com/bootstrap/scaffolding.html#responsive –