Ma page de raccourcis d'horaires de bus/train

Mon projet

J'avais pour besoin celui de connaître les horaires des prochains bus aux arrêts autour de chez moi et me permettant de me rendre à la gare ou me permettant de rentrer chez moi depuis Paris. Ce sont toujours les mêmes arrêtes/même gare et donc des trajets prédéterminés. Plutôt que d'aller sur les sites de la RATP/SNCF, de perdre du temps à saisir les gares de destinations et d'arrivée, je me suis fait une page de raccourci avec des liens vers les mêmes pages, chaque lien est présenté par un gros bouton coloré. Ce sera l'occasion pour moi de dérouiller un peu mon HTML5/CSS3.

Les services fournis par les transporteurs en Ile de France

Pour une ligne RATP de bus donnée, on a une version WAP (plus légère du site et qui va à l'essentiel) de la forme :

Cette URL, avec l'ID du bus (BXXX) et le numéro de station (XXX_XXX) donne les horaires de prochain passage dans les deux sens (vers les deux terminus de la ligne).

Pour la SNCF et les RER transilien ligne C et D, c'est cette URL avec la gare de départ et la gare d'arrivée, dont le code est sur 3 lettres. (Représenter ici par XXX et YYY) que j'utilise

Une fois que l'on a les bons liens d'intérêts (pour les différents trajets), on peut passer à la suite.

Les raccourcis

J'ai donc défini la liste des boutons suivants :
Maison : ça m'affiche sur une même page, les horaires des différentes lignes bus qui passent à côté de chez moi pour mener à la gare.
Gare : ça m'affiche sur une même page, les horaires des différentes lignes bus qui partent de la gare et me rapproche de chez moi.
Paris : ça me redirige vers la pages des horaires du RER, dans le sens du retour.
Plutôt que d'avoir des tas de marques-pages/favoris, j'ai un seul favori sur l'écran d'accueil vers une page avec des gros boutons colorés.

Pour l'utilisation des horaires de bus, j'ai deux lignes de bus de possibles. Et plutôt que de cliquer plusieurs fois, pour consulter les horaires du premier bus, revenir en arrière, consulter les horaires du second bus, j'ai fait une fausse page intermédiaire qui fusionne les deux pages correspondant aux deux lignes d'intérêt passant à l'arrêt me menant à la gare. Le lien est donc vers cette page html qui intègre elle-même les deux pages des horaires RATP, comme le montre le code suivant :

Problème de zoom

J'ai fait le développement via le navigateur Firefox, j'ai testé en mode "vue adaptative" et avec le simulateur de FirefoxOS, au sein du navigateur. Pas de soucis, tout s'affiche bien à la taille que je veux. Exemple avec une capture d'écran du prototype :

J'ai mis cette page HTML en ligne sur un serveur. J'accède à cette page depuis mon ZTE Open C sous FirefoxOS 2.2 quand j'ai besoin d'un horaire.
Et là, bien qu'ayant défini des tailles fixes en pixels pour les différentes zones, j'avais un problème d'affichage comme illustrer par l'image suivante :

En ajoutant la ligne au code source

Je n'ai plus ce problème. L'affichage qui correspond à ce que j'attendais (la vue version adaptative) sur le ZTE Open C et reste identique sur le navigateur et l'émulateur.