Version PC et mobile même page

Bonsoir,

Je dois réaliser une page HTML qui regroupe une version ordinateur et une version mobile
J'ai réalisé un .html pour la version ordinateur et un autre pour la version mobile
Comment puis-je faire en utilisant uniquement du HTML (ou javascript) pour regrouper tout en une seule page ? pas de PHP, htaccess, pas d'appel d'autre fichier html

Une idée ?

Merci d'avance

Citation:

---

Comment puis-je faire […] pour regrouper tout en une seule page ?

---

Ce n'est pas clair.

• Soit vous avez deux pages (une mobile et une desktop), et vous faites de la détection de user-agent (avec javascript ici).
• Soit vous ne proposez qu'une seule page html, dont le design et les fonctionnalités s'adapteront en fonction du contexte de navigation (adaptive design). Ici, ça peut passer par CSS, mais aussi par HTML et Javascript. C'est selon moi la meilleure solution, car la détection de user-agent n'est pas fiable.

L'html pure et dur ne permet rien en dehors de l'affichage. Donc dès que tu as des demandes spécifiques il te faudra obligatoirement passer par des ajouts.

Bonsoir et merci pour vos réponses,

J'ai pensé à l'adaptive design mais les 2 versions de cette page sont vraiment différentes.
En fait, ce que je cherche serait une détection par user-agent qui afficherai une partie du code html en fonction de l'user-agent

la détection par user agent est viable et surtout est réalisable mais là encore l'html ne peux rien pour toi il faudra passer par du javascript pour effectuer soir les redirection soit les restriction de masquage et d'affichage de zone.

Si le contenu de la page est le même mais que seul l'affichage doit être différent, le mieux est de passer par un CSS "alternatif" :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

<!-- CSS "normal" à charger sur un PC --> <link href="css/desktop.css" rel="stylesheet" type="text/css">   <!-- CSS à charger pour un téléphone en se basant sur la résolution --> <link href="css/phone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" />   <!-- CSS à charger pour une tablette en se basant sur la résolution --> <link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 768px)" />   <!-- CSS à charger pour un iPad --> <link href="css/ipad.css" rel="stylesheet" type="text/css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)" />

---

Pour info, je n'ai pas testé ces codes, c'est juste ce que retournent des posts sur d'autres forums mais apparement ils sont valides.

Citation:

---

Envoyé par Vil'Coyote

la détection par user agent est viable et surtout est réalisable mais là encore l'html ne peux rien pour toi il faudra passer par du javascript pour effectuer soir les redirection soit les restriction de masquage et d'affichage de zone.

---

Si je peux faire ça en javascript tout en restant sur la même page html je suis preneur. Je peux rajouter un fichier .js ou intégrer ça sans soucis dans le html
Mais comment est-ce réalisable de n'afficher qu'une partie de la page et masquer le reste ?

Bonjour, une solution sans prise de tête (je n'ai pas dis c'était bien :roll:), consiste à masquer les éléments directement en css.

Tu détecte le user agent en javascript ou le taille de la fenêtre avec css et tu charge ton fichier css lié dédié au mobile. Pour masquer un élément un simple display:none suffit.

Encore une fois, ce n'est pas ce qu'il y a de plus propre.