2008-11-03 25 views
11

He estado agregando soporte css para handheld a mi sitio web pero no he podido encontrar una buena herramienta para probar.¿Qué se usa para probar el css de mano en su sitio web?

He intentado usar el complemento webdeveloper para Firefox, pero no funciona para mí. Tal vez sea porque todo mi CSS está en html y no en un archivo CSS separado.

¿Hay otras herramientas de prueba disponibles además de salir y comprar un dispositivo de mano?

Respuesta

8

Con un poco de caza que encontré lo que estaba buscando, gracias por los chicos clientes potenciales.

Opera mostrará handheld css si selecciona "Pantalla pequeña" en el menú Ver.

+0

También podría probar css basado en pantalla en IE6 en Windows, pero no lo recomendaría ... –

+0

¿Por qué demonios alguien menospreciaría esto cuando encontré lo que estaba buscando? Llámame confundido. – KPexEA

+0

No veo la opción "Pantalla pequeña" en la última versión (10.53) de Opera. Quizás ha sido eliminado. –

3

Si tiene Visual Studio, debe haber emuladores de dispositivo que le permitan probar IE móvil, o se pueden encontrar de forma independiente en el sitio de Microsoft. Here are some for WM 5. Hay un OpenWave simulator disponible para probar ese navegador. Blackberry simulators están disponibles también, para probar el navegador Blackberry. Puedes (tipo de) probar el soporte de iPhone con Safari, aunque no puedes verificar la metaetiqueta de la ventana gráfica. Hay un Opera Mini simulator aquí.

También, obtener su CSS de su HTML :)

+0

Mi CSS está incrustado ya que está personalizado en función de las preferencias de los usuarios (pueden personalizar el tamaño/colores de fuente predeterminados, etc.). Creo que debería dividir la parte que es estática. Está en mi lista de cosas por hacer. – KPexEA

+0

También puede servirlo dinámicamente desde su servidor. Haga que un proceso del lado del servidor (script php, lo que sea) maneje la solicitud de customUser.css y escríbalo según sus preferencias. De esta manera, aún puede ser almacenado en caché por el navegador. –

0

Para probar el iPhone, se puede obtener el iPhone SDK here pero se necesita equipo OS X/Apple para el que se ejecute la manera oficial.

No hacks oficiales /:

  • Hay maneras de conseguir OS X corriendo en equipos de standart como here.
  • O obtenga el SDK ejecutándose en Linux/vmware descrito here.

Happy Hacking!

Huibert Gill

6

No estoy seguro de si es una buena idea para resucitar la vieja pregunta, pero espero que alguien lo encuentra :)

Hay una manera simple de probar css de mano con la media queries:

@media handheld, screen and (max-width: 500px) { /* your css */ } 

Después de eso, puede probar en los navegadores que implementan consultas multimedia cambiando el tamaño de la ventana a menos de 500 px.

+0

maravilloso ... ¡fácil y funcional! Gracias –

1

Descubrí que cambiar los tipos de medios en el entorno de desarrollo funciona mejor para mí.

Por ejemplo, si está probando un "handheld" css, simplemente agregue el tipo de medio "screen" a media atrib y comente su css por defecto.

Después de completar este paso, normalmente querrá probar en un dispositivo de mano real.

<!-- <link rel="stylesheet" type="text/css" media="screen" href="screen.css" /> --> 
<link rel="stylesheet" type="text/css" media="screen,handheld" href="handheld.css" /> 
0

La mayoría de los teléfonos inteligentes como el iPhone y algunos dispositivos Android no reconocen la handheld.css. Tomaron el mediatype="screen", por lo que debe incluir este short snippet of JavaScript.

Cuestiones relacionadas