Support mobile
Nous allons tenter de détecter si vous êtes sur un support mobile ou bureau.
Il peu y avoir deux méthodes, une en touchant au kernel ce qui nous permettrait de rediriger le visiteur sur un thème complet adapté pour les support mobile. L'autre méthode permet d'éviter de toucher au kernel, mais cependant on ne peut rediriger que les css, pas les fichiers templates, ce qui est limite la personnalisation du coup.
je vais commencer, sans toucher au kernel, par la suite je continuerai cet article une fois que moi-même j’aurais trouvé la solution en touchant au kernel
À partir du thème de votre choix, il suffit de se placer dans le fichier header.tpl, à la place de vos <link> pour le css, vous pouvez imbriquez tous cela dans une condition JavaScript comme dans cet exemple::
Là on dit que si l'écran est plus petit ou égal à 480 j'utilise les css placés dans le dossier {PATH_TO_ROOT}/templates/{THEME}/theme/mobile, sinon j'utilise les css par défaut.
On peut même virer le else en plaçant le script à la fin des balise <HEAD>:
Si le support mobile est détecté les css du dossier {PATH_TO_ROOT}/templates/{THEME}/theme/mobile sont censé passer au dessus des css par défaut, cependant cette méthode est risquée car vous serrez obligés de redéfinir tous les options css au risque d'avoir des conflits.
Cet méthode sans toucher au kernel peu paraître bien , mais elle est très limitée, car vous ne pouvez pas toucher aux fichiers templates mais juste au css
FIXME
++ Be Human
Il peu y avoir deux méthodes, une en touchant au kernel ce qui nous permettrait de rediriger le visiteur sur un thème complet adapté pour les support mobile. L'autre méthode permet d'éviter de toucher au kernel, mais cependant on ne peut rediriger que les css, pas les fichiers templates, ce qui est limite la personnalisation du coup.
je vais commencer, sans toucher au kernel, par la suite je continuerai cet article une fois que moi-même j’aurais trouvé la solution en touchant au kernel
Sans toucher au kernel
À partir du thème de votre choix, il suffit de se placer dans le fichier header.tpl, à la place de vos <link> pour le css, vous pouvez imbriquez tous cela dans une condition JavaScript comme dans cet exemple::
Code HTML :
<script type="text/javascript"> if ((screen.width <= 480) || (screen.height <= 480)) { document.write("<link rel=\"stylesheet\" href=\"{PATH_TO_ROOT}/templates/{THEME}/theme/mobile/default.css\" type=\"text/css\" media=\"screen, print, handheld\" /\>"); } else { document.write("<link rel=\"stylesheet\" href=\"{PATH_TO_ROOT}/templates/{THEME}/theme/default.css\" type=\"text/css\" media=\"screen, print, handheld\" /\>"); } </script>
Là on dit que si l'écran est plus petit ou égal à 480 j'utilise les css placés dans le dossier {PATH_TO_ROOT}/templates/{THEME}/theme/mobile, sinon j'utilise les css par défaut.
On peut même virer le else en plaçant le script à la fin des balise <HEAD>:
Code HTML :
Si le support mobile est détecté les css du dossier {PATH_TO_ROOT}/templates/{THEME}/theme/mobile sont censé passer au dessus des css par défaut, cependant cette méthode est risquée car vous serrez obligés de redéfinir tous les options css au risque d'avoir des conflits.
Cet méthode sans toucher au kernel peu paraître bien , mais elle est très limitée, car vous ne pouvez pas toucher aux fichiers templates mais juste au css
En touchant au kernel
FIXME
++ Be Human