Meilleur façon de changer de template/css en fonction de la résolution (ou iframe)

[php_addict]

Bonjour

Je me pose la question suivante:

quelle est la meilleure façon de changer de template (moteur de template) en fonction de la résolution d'écran du navigateur ou bien lors de la détection d'une iframe dans les cas suivants:

- on détecte une basse résolution d'écran, on est certainement sur un navigateur mobile, on utilisera un template light, version mobile quoi...

- on détecte que l'on est dans une iframe (application facebook), on est limité en largeur donc, , on utilisera un template light, la version mobile précédente ou version adapté à l'iframe de facebook

bon...étant donnée que la detection de la résolution ou de l'iframe se déroule en javascript, comment dire au serveur (php) que l'on veut charger tel ou tel template?

sachant également que le template "standart" et le template "light" seront très nettement différents, voir même carrément pas identique...

il y aurait aussi la solution JS/JQUERY de changer à la volée le document mais cela ne me semble pas viable...

avez vous un avis sur cette question?

bonne journée !

[Sephi-Chan]

Si tu package tes feuilles de styles, tu n'as plus qu'un fichier CSS à inclure dans tes pages. Ça limite le problème.

Ensuite, le plus simple me semble d'utiliser les media queries et de simples classes.

Quand Facebook requête ta page dans une iFrame, il lui envoie des paramètres : tu as juste à tester leur présence pour ajouter ou non la classe facebook à ton élément body ou html.

[Plume]

Et Responsive Design.

[php_addict]

j'ai rien compris...ca consiste en quoi le Responsive Design ?

[Maks]

Une solution en JS toute bête, pas forcément la meilleure, mais peut être la plus rétrocompatible (pour IE 8 qui ne supporte pas les media queries CSS3).

Code :

<link rel="stylesheet" type="text/css" href="styles.css" id="stylesheet" />

Code :

window.addEventListener('load', function() {

var width  = screen.innerWidth || document.documentElement.clientWidth;

if (width < 640) document.getElementById('stylesheet').href = 'styles_light.css';

// ici tu crées un cookie en JS pour dire que tu utilises un template light
// je te laisse chercher sur le net ^^

}, false);

Ensuite dans ton PHP tu peux tester l'existence du cookie pour savoir quel template utiliser
Y'aura surement un problème de timing entre la création du cookie et l'affichage de la page PHP. Tu peux résoudre ça avec une requête Ajax, les fois d'après ça passera

[Viciousity]

CSS3 et media queries

[php_addict]

bonsoir, je reviens sur le sujet...

en fait les bidouilles JS et les media queries ne me semblent pas adaptés:

certes il faut tout repositionner les éléments (donc avoir un autre package de css) mais cela ne suffit pas, car il faut adapter les vues et donc un nouveau template HTML et des vues HTML adaptées. Car passer d'une largeur de 1000 à une largeur de moins de 500 pose pas mal de problème, on ne peut pas tout repositionner, il faut adapter, simplifier, etc...

le choix d'un template ou de l'autre se fera:

- soit par "le choix de l'utilisateur" , genre un formulaire
- soit manuellement (iframe facebook ou version .mobi)

et le choix de l'un des template doit aussi se faire quand le joueur n'est pas loggué (pages publiques)

donc qu'est ce qui va me dire si je dois charger soit un template et les css adaptés soit un autre template ?

- variable de $_SESSION ? bof...si il y a 3000 joueurs ca fait quand même plein de variables de session pour pas grand chose.
- cookie? ca me semble pas mal...
- un paramètre dans l'url (bof...faut modifier tout les <a href="">

qu'en pensez-vous ?

[Sephi-Chan]

En analysant les entêtes de la requête HTTP, l'analyse du user-agent suffit.
Quant à Facebook, ses requêtes sont accompagnées de paramètres GET.

[php_addict]

certains firewalls ne filtrent ils pas certaines information du header http? il me semble que c'est le cas pour le http_referer entre autre...

[Sephi-Chan]

Je n'ai jamais rien vu de tel. Quand bien même des utilisateurs supprimeraient cette information (pour s'amuser, afficher le site mobile sur leur navigateur ou n'importe quelle autre raison), qu'est-ce que ça change ?