He pasado por varias herramientas centradas en el responsive para probar en diferentes dispositivos, pero al final me quedo usando lo que tengo más a mano (supongo que por rapidez).
Safari + Develop
Nada como probar el responsive de un sitio web directamente en los dispositivos reales para los que estemos desarrollando. Para esto me ayudo bastante del navegador de Apple con su completisisisima herramienta «Develop» donde puedo conectar mi iPad y iPhone con el «Web inspector» de Safari.
Chrome + Emulation
Google Chrome tiene también en su «Inspect Element» una potentisima opción para emular un gran número de dispositivos.
Los usuarios de Apple suele tener actualizado su sistema operativo, tanto de escritorio MacOS como de dispositivos móviles iOS. Supongo que su facilidad en los procesos de actualización tiene mucho que ver en ello.
Por suerte la compi @chavalina tenía todavía su iPad con iOS6 y pudo reportarme un fallo de CSS que curiosamente solo se producía en esa versión, tanto con Chrome como Safari. Sin embargo en iOS7 y bajo los mismos navegadores todo perfecto, también en el resto de navegadores y dispositivos.
Ya puestos en contexto vamos al grano.
Como emulador iOS 6 si ya tenemos actualizados nuestro iPad podemos recurrir a Xcode. Tenemos que ir a «Preferences > Downloads > Components» y descargar «iOS 6.1 Simulator«. Nos pide instalar y reiniciar la aplicación Xcode. A continuación creamos un proyecto Xcode «vacio», al lado de los controles principales (Play y Stop) tenemos ahora la opción para seleccionar como sistema operativo iOS6.1 y hacemos clic en el botón Play.
Una vez emulado podemos usar la fabulosa herramienta Web Inspector de Safari, menú: Develop > iPad Simulator.
A partir de aquí a emular, probar y solucionar. Por curiosidad, os cuento que al final en mi caso, el problema era de CSS con la forma de interpretar -webkit-linear-gradient por parte de iOS6.
Tener diferentes hojas de estilo dependiendo del navegador me parece algo horrible 🙁 . Pero si por algún motivo es necesario, podemos emplear una forma bastante fácil y limpia mediante PHP (Ref. Andrew Martin).
Para ello, (1) pondremos un CSS base que sea compatible para todos los navegadores y a continuación (2) haremos uso del array $_SERVER y del campo donde se cargan las cabeceras con información del navegador del usuario «HTTP_USER_AGENT».
Al hilo del anterior post «Virtualización de WinXP + IE6, probando nuestro CSS» me ha llegado un comentario (gracias d2f) con otra herramienta que en su día deje pasar de largo (craso error Javi).
Xenocode nos permite en su web descargarnos un plugin y emular estos navegadores sin más complicaciones.
¿Un problema de usabilidad?
Hace un tiempo visite este sitio web, y me pareció «extraño» empezando por los banners y siguiendo por la estructura y diseño. Luego tras encontrar la web con todos los navegadores hice clic en cada título, por ejemplo «internet explorer 6» y esto me llevaba a la web de Microsoft, un simple enlace. Así que me fui y hasta hoy jejeje 😀
Como explicación creo que se debe a la comodidad de hacer clic en el texto del navegador (un poco más grande) y no en el botón verde que simula el «ON» pensando que sería una imagen y que al ir unidas llevaría al mismo destino.
Me gustaría saber a cuantos les ha pasado lo mismo 🙂 (no creo que sea el único rarito)
Uso cookies para ofrecer una mejor experiencia de uso y analizar el tráfico.
Usamos cookies para mejorar nuestra web y servicio. Las cookies necesarias son esenciales para el correcto funcionamiento, el resto son opcionales. Más información en la política de privacidad y política de cookies.
Estas cookies son necesarias para que el sitio web funcione y no se pueden desactivar en nuestros sistemas. Por lo general, solo se configuran en respuesta a las acciones realizadas para solicitar servicios. Puedes configurar tu navegador para bloquearlas. Estas cookies no almacenan ninguna información personal.
Estas cookies permiten que el sitio web proporcione una mejor funcionalidad y personalización. Pueden ser establecidas por nosotros o por proveedores externos cuyos servicios hemos agregado a nuestras páginas. Si no permites utilizar estas cookies, es posible que algunos de estos servicios no funcionen correctamente.
Estas cookies nos permiten contar las visitas y fuentes de tráfico para poder evaluar el rendimiento de nuestro sitio web y mejorarlo. Nos ayudan a saber qué páginas son las más o las menos visitadas, y cómo los visitantes navegan por el sitio. Toda la información que recogen estas cookies es agregada y, por lo tanto, es anónima.
Estas cookies pueden ser utilizadas por socios publicitarios para crear un perfil de tus intereses y mostrarte anuncios relevantes en otras webs. No almacenan directamente información personal, sino que se basan en la identificación única de su navegador y dispositivo. Si no permites utilizar estas cookies, verás menos publicidad.