1485 sujets

Web Mobile et responsive web design

[Résolu] Style pour version mobile

Bonjour à tous,

Je souhaite faire une version de mon site web pour mobile et tablettes.
J'aimerais juste modifier le code CSS pour différencier de la version classique.

J'ai essayé d'utiliser 
@media handheld
mais sans succès.
Je sais qu'il existe la spécification de la taille de l'écran mais ce n'est pas suffisant. Je souhaite vraiment distinguer le style mobile/tablettes de celui pour ordinateur.

J'espère que quelqu'un pourra m'aider.
Mick4553
Bonjour,

Vous confondez les media queries avec l'attribut que l'on peut mettre dans une balise link pour cibler les mobiles :
<link rel="stylesheet" media="handheld" href="handheld.css" type="text/css" />

De toute façon cette règle est ignorée par la majorité des terminaux à qui elle est destinée, comme expliqué ici : Alsacreations, media-queries
Sur ce même lien vous trouverez toutes les infos qu'il vous faut sur les media queries.

Attention ce type d'adaptation demande beaucoup de travail. Bon courage.
Merci pour ce lien.

J'ai essayé plusieurs conditions mais "handheld" ne marche pas.
En mettant le style brut dans la page html, le résultat est bon pour la première ligne mais pas la deuxième:

@media (orientation:portrait) {}
@media handheld {}

Je comprends pas ce qui est différent entre ces deux conditions. A moins que le problème vienne plutôt de mon téléphone...
Olivier C a écrit :
... De toute façon cette règle est ignorée par la majorité des terminaux à qui elle est destinée, comme expliqué ici : ...
D'accord. Elle sert à rien en fait...
Est ce qu'il existe un autre moyen pour la contourner et appliquer un style différent aux mobiles ? En dehors des critères de tailles/résolution.
Mick4553 a écrit :
Est ce qu'il existe un autre moyen pour la contourner et appliquer un style différent aux mobiles ? En dehors des critères de tailles/résolution.

Oui : la détection du user agent du navigateur de l'utilisateur, via php ou javascript.

Mais cette technique est à proscrire car n'importe quel navigateur est en mesure d'utiliser n'importe quel user agent. Qui n'a pas fait l'expérience de ces sites marchands - aux coûts de développement exorbitant - bugant une fois sur deux sur mobile en raison d'une tentative de détection du user agent échouée ?

La détection de la résolution reste le moyen le plus fiable, et de loin le plus adapté, pour détecter les supports. Après tout - mis à part la recherche de la capacité de la bande passante - c'est bien avant tout la définition de l'écran qui intéresse le développeur non ?
D'accord, je vais utiliser la résolution puisque ça a l'air d'être le plus simple et plus adapté.
Ce qui m’intéressais c'est pouvoir faire un menu apparaissant avec la propriété 'hoover', mais ça marche pas sur mobile Smiley cligne
Maintenant faut que je trouve l'inspiration pour créer un menu pour faibles résolutions...

Merci pour ton aide !

Mick4553
pour ça tu peux ajouter un onclick sur ton li, comme ça


                <li onClick="">Lien 1
                    <ul class="subMenu">
                        <li><a href="ton lien">lien</a></li>
                        <li><a href="ton lien">lien</a></li>
                        <li><a href="ton lien">lien</a></li>
                    </ul>
                </li>
                <li onClick="">Lien 2
                    <ul class="subMenu">
                        <li><a href="ton lien">lien</a></li>
                        <li><a href="ton lien">lien</a></li>
                        <li><a href="ton lien">lien</a></li>
                    </ul>
                </li>
                <li onClick="" ><a href="ton lien">lien</a></li>
Mick4553 a écrit :
Ce qui m’intéressais c'est pouvoir faire un menu apparaissant avec la propriété 'hoover', mais ça marche pas sur mobile...

En alternative à la solution de JulieSunset (qui est sans doute la plus simple), voici l'exemple d'une solution full css d'un menu pour mobile (la commande + l'animation ouverture/fermeture du menu) : Menu for Scriptura framework.
Merci pour ces conseils, je vais utiliser le onclick pour l'adapter à un nouveau menu.
Je marque le sujet comme résolu, j'ai pas exactement ce que je souhaitais mais ai une solution.

A bientôt sur un autre sujet...
Sujet clos
Aller à