1448 sujets

Web Mobile et responsive web design

Bonjour
Je suis en train d'adapter un site ancien au mobile à l'aide de Mobile_detect. Ca marche très bien, du moins comme je le voulais, aussi bien sur mobile que sur PC. Sauf que : J'ai voulu voir ce que ça donne sur une tablette, et là patatras, is_Tablet n'est pas reconnu !
J'utilise comme prévu, par exemple dans mon fichier index.php :

include_once 'Mobile_Detect.php';
$detect = new Mobile_Detect();
if($detect->isMobile())
{header("Location:http://monsite.com/mobile_index.php");}

if($detect->isTablet())
{header("Location:http://monsite.com/tablet_index.php");}


En utilisant une tablette ipad empruntée à un ami, je retombe toujours sur la page mobile_index.php qui n'est pas trop mal mais contient des imperfections puisqu'elle ne bénéficie pas des css prévues dans la page tablet_index.php. C'est gênant car il y a de plus en plus d'internautes qui utilisent des tablettes.
Avez vous une solution à proposer.

Autre sujet, qui a d'ailleurs peut être un lien avec le précédent :
Dans mes fichiers prévus pour PC, j'utilise les symboles Coeur, Pique, Trefle et Carreau (c'est un site de bridge). Pour cela j'utilise les caractères &#9829, &#9824, &#9827 et &#9830, et j'affecte
au Coeur et Carreau une classe de couleur rouge. Ca n'a jamais posé de problème.
Quand j'ai commencé la migration sur mobile j'ai fait la même chose et ça semblait bien marcher. C'était impeccable sur mon mobile android et sur certains autres, mais sur d'autres les Coeur et les Carreaux restaient en noir, la classe rouge n'étant d'aucun effet.
J'ai du tout reprendre en utilisant des fichiers image gif au lieu des codes et en les adaptant en css pour qu'elles s'intègrent parfaitement au texte sur mobile. Je n'ai jamais compris la raison, mais il est possible que cela vienne des versions android ou ipad des mobiles des amis à qui je demandais de vérifier. Après cette refonte, tout marche sur tous les mobiles.

Les imperfections que j'évoque dans le sujet précédent tiennent à ce que, sur la tablette, les images des Trèfles, coeur, etc... sont beaucoup plus grandes que les caractères du texte (c'est normal, elles n'ont pas le code css adapté), alors que sur mobile (comme sur PC) c'est impeccable.
Modifié par duabmi (03 Apr 2018 - 16:51)
Modérateur
Bonjour,

un petit coup d'oeil sur la doc de la lib:


// Any mobile device (phones or tablets).
if ( $detect->isMobile() ) {
 
}
 
// Any tablet device.
if( $detect->isTablet() ){
 
}
 
// Exclude tablets.
if( $detect->isMobile() && !$detect->isTablet() ){
 
}
Merci de la réponse
J'ai déjà vu ce bout de code, mais à priori c'est pour exclure les tablettes, donc à l'inverse de ce que je recherche.
Bonjour duabmi

Une petite vérification avant d'aller plus loin :
Avec ta tablette va sur le lien de test http://demo.mobiledetect.net/ et vérifie qu'il te détecte en isTablet() = true dans la partie "Basic detection methods"
- S'il te détecte pas en temps que tablette, cela ne sert à rien de chercher le pb
- S'il te détecte en temps que tablette, vérifie que ta lib php est à jours

Si le problème persiste, deuxième vérification :
- ne mets aucun de test et redirige que
{header("Location:http://monsite.com/tablet_index.php");}

Vérifie que tablet_index.php ne redirige pas vers mobile_index.php

Si le problème persiste, alors c'est que tes condition bugs log les valeur de
$detect->isMobile()
$detect->isTablet()


A partir de ce moment là, tu pourras refaire tes conditions
mais a mon avis les deux sont à true. et alors là il faudra choisir
if ( $detect->isMobile() ) {}
if( $detect->isTablet() ){}

ou
if ( $detect->isTablet() ) {}
if( $detect->isMobile() ){}
Modérateur
Ma réponse contenait la solution: isMobile détecte les mobiles et les tablettes.

Ton code en pseudo-code correspond donc à :


si (mobile ou tablette) {
  redirige sur page mobile;
}
si (tablette) {
  redirige sur page tablette;
}


a écrit :
J'ai déjà vu ce bout de code, mais à priori c'est pour exclure les tablettes

C'est très exactement ce dont tu as besoin Smiley smile
Modifié par kustolovic (06 Apr 2018 - 07:46)
Bonjour aliasdmc
Merci de ta réponse. Je vais essayer tout ça et je te tiendrai au courant. Mais il faut d'abord que j'emprunte à nouveau une tablette (ou que j'en achète une).
Cordialement
Bonjour aliasdmc et kustolovic
Effectivement isMobile détecte les mobiles et les tablettes. J'ai acheté une petite tablette sous android. J'ai essayé sans changer quoi que ce soit au code, et je constate que tout est OK aussi bien avec mobile et tablette android, que sous windows. Dans le code, le isTablet est donc inutile, ainsi que les fichiers de redirection tablet_index.php et autres tablet_qqchose.php.

Il reste qu'il y a un petit problème avec les tablettes ipad (c'est sur l'une d'elles que j'avais empruntée et que j'avais fait des tests) et peut être avec les mobiles apple. Il faudrait leur appliquer un traitement spécifique, et les détecter séparément avec isios. Mais comme je ne peux me procurer facilement ces matériels pour faire des tests, pour l'instant je laisse tomber.

Mais je vous remercie grandement d'avoir pris la peine de réfléchir au problème de de fournir des réponses pertinentes. Même s'il ne l'est pas complètement, je marque le problème comme résolu.