1448 sujets

Web Mobile et responsive web design

Pages :
bonjour Smiley smile

voila tout est dans le titre , je cherche comment faire pour qu'une page soit capable reconnaitre si le visiteur est sur un pc (mac) ou sur un appareil mobile ( téléphone, tablette et autre )

y a t'il un script ? une meta ?

merciiiiiiiii de votre aide
Salut,

Halte à la balkanisation du Web !!!

Plus calmement, il est tout à fait possible d'adapter l'affichage d'un site Web aux supports mobiles, que ce soient des téléphones portables ou des tablettes. Regarde du côté des media queries et de la méta viewport. Bref, de l'adaptation uniquement en CSS (tu peux même t'inspirer de cette feuille de style de base pour le Web mobile).

Bonne lecture ! Smiley smile
merci victor Smiley smile

j'ai une partie de réponse dans ton post.
Mais mon problème reste car pour alléger le site j'en ai créé une déclinaison avec jquery mobile ( jolie , simple, rapide, léger )
donc voila ...
comment faire pour que ma page mobile s'affiche quand un mobile visite mon site Smiley smile
Salut,

En PHP, tu as la fonction get_browser(). Attention, elle ne s'utilise pas simplement en l'appelant, il faut bien lire toute la doc de cette fonction.
Bonjour,

Tu peux envisager une redirection (immédiate) en JS en fonction de la taille du navigateur, (oublies pas de rediriger en prenant les paramètres dans l'url, rien de plus énervant que de suivre un lien d'une page interne desktop et se retrouver sur l'accueil du site mobile).

Et/Ou tu peux utiliser les media queries, qui en déca d'une certaine largeur affiche un lien vers la version mobile de ton site.

Si les fonctionnalités de ton site sont sensiblement identiques quelques soit le média de restitution, tu devrais opter plutôt pour le responsive web design. (Ce qui n'est pas toujours envisageable, pour des raisons d'ergonomie et d'expérience utilisateur différentes d'un média à l'autre.)
Patidou a écrit :
+1 avec Victor


Mouais, enfin ça marche pour un petit site vitrine. Pour des sites avec des fonctionnalités qui ne peuvent pas fonctionner sur un mobile media queries ne suffit pas.
Modifié par jb_gfx (13 Sep 2011 - 19:26)
Où seulement si le site mobile et le site desktop n'ont pas la même utilité pour l'utilisateur. M'enfin, les cas peuvent être nombreux.

En tout cas, sans vouloir me faire trop d'auto pub, j'ai posté sur mon blog un code pour rediriger les utilisateurs mobiles (ça vise assez bien presque tous les mobiles).

Tu peux y jeter un oeil si tu veux t'en inspirer ou l'utiliser:

http://simonboudrias.com/blog/detecter-un-mobile-redirection-php/

J'en suis à le refaire en Class pour php5 et à y ajouter quelques fonctionnalités. Mais comme je commence tout juste un nouvel emploi, je ne peux rien promettre dans le temps !
Modifié par Vaxilart (18 Feb 2012 - 02:24)
De toutes façons la redirection immédiate est déconseillée, c'est mieux de proposer le choix au visiteur ou alors pouvoir revenir au site normal si il en a envie.
Patidou a écrit :
De toutes façons la redirection immédiate est déconseillée, c'est mieux de proposer le choix au visiteur ou alors pouvoir revenir au site normal si il en a envie.

Effectivement, si la version mobile s'avère décevante aux yeux de l'utilisateur.
Patidou a écrit :
De toutes façons la redirection immédiate est déconseillée, c'est mieux de proposer le choix au visiteur ou alors pouvoir revenir au site normal si il en a envie.


J'aurais du le préciser, si un cookies , ne stipule pas le choix de rester sur la version desktop, par redirection immédiate (script en haut du code, et redirection sans attendre le chargement complet de la page) j'ai surtout en tête le changement de contexte perturbant dans un contexte d'accessibilité, mais aussi la diminution du temps d'attente susceptible de faire perdre un client.
Salut a tous,

Je ne sais pas si tu as trouvé ta réponse, mais personnellement j'utilise ceci sur mon site au cas où l'internaute le visiterai avec son iPhone :


<script type="text/javascript">
function iPhoneAlert() {
if((navigator.userAgent.match(/iPhone/i))||(navigator.userAgent.
match(/iPod/i))){
var question = confirm("Souhaitez-vous naviguer sur le site optimisé pour iPhone?")
if (question){
window.location = "http://iphone.monsite.com/";
}else{

}
}
}
</script>

Ceci ne détecte que les iphone, mais je crois qu'en remplacant "iPhone" par "iPad" cela fonctionne. Par contre en ce qui concerne Android cela ne fonctionne pas pour le moment.

;)
Modifié par reedbedroom (22 Sep 2011 - 09:23)
reedbedroom a écrit :
Salut a tous,

Je ne sais pas si tu as trouvé ta réponse, mais personnellement j'utilise ceci sur mon site au cas où l'internaute le visiterai avec son iPhone :

Ceci ne détecte que les iphone, mais je crois qu'en remplacant &quot;iPhone&quot; par &quot;iPad&quot; cela fonctionne. Par contre en ce qui concerne Android cela ne fonctionne pas pour le moment.

;)

Et à chaque retour sur la home, je reçois le message? Il faudrait au moins un cookie pour retenir le choix. Smiley cligne

Pour ce qui est de la détection je couplerais ça avec les média queries en css, si élément #truc est masqué alors c'est un mobile et on pose la question. Faudrait que je teste tiens. Smiley smile
Pour moi la solution la plus souple, serait de faire un script PHP en amont qui analyse la chaine useragent, et qui, si il y trouve un nom de plateform mobile (ex blackberry, iphone ect) te redirige vers la page souhaiter.

Sa existe sur le web, il y'en a un très complet et gratuit; fait par Chris Schuld.

Après , le soucis reste le fait que la solution n'est pas très évolutive, car si demain il ya une toute nouvelle firm qui lance un smartphone qui cartonne ( peu probable, mais bon), sa chaine useragent, sera nouvelle et donc non detecter par le script PHP.


C'est pour ça que moi je cherche un script php ou javascript mais FIABLE, qui détecterais la résolution du media et qui redirigerait en concéquence
G3NE a écrit :
Pour moi la solution la plus souple, serait de faire un script PHP en amont qui analyse la chaine useragent, et qui, si il y trouve un nom de plateform mobile (ex blackberry, iphone ect) te redirige vers la page souhaiter.

Sa existe sur le web, il y'en a un très complet et gratuit; fait par Chris Schuld.

Après , le soucis reste le fait que la solution n'est pas très évolutive, car si demain il ya une toute nouvelle firm qui lance un smartphone qui cartonne ( peu probable, mais bon), sa chaine useragent, sera nouvelle et donc non detecter par le script PHP.


Là est le problème Smiley smile


G3NE a écrit :
C'est pour ça que moi je cherche un script php ou javascript mais FIABLE, qui détecterais la résolution du media et qui redirigerait en concéquence


D'où les css… Je vais faire un test, mais ça ne sera pas ce soir, plutôt demain ou ce weekend.
De plus, une chaîne d'agent utilisateur peut être facilement manipulée pour qu'on lui fasse dire n'importe quoi, sans oublier que sa syntaxe peut évoluer de version de navigateur en version de navigateur (la chaîne d'agent utilisateur utilisée par Opera en est un bel exemple, sa syntaxe ayant été remaniée lors de la sortie de la version 10.00). Autrement, le browser sniffing, quel que soit le langage de programmation utilisé, n'est pas fiable à 100 %.
Patidou a écrit :







D'où les css… Je vais faire un test, mais ça ne sera pas ce soir, plutôt demain ou ce weekend.


Oui, d'ou les media-queries, mais le soucis, c'est que leurs interpretation selon les plateformes et les navigateurs sont vraiment très aléatoire pour l'instant je trouve, ça n'est donc pas très fiable
G3NE a écrit :
Oui, d'ou les media-queries, mais le soucis, c'est que leurs interpretation selon les plateformes et les navigateurs sont vraiment très aléatoire pour l'instant je trouve, ça n'est donc pas très fiable

Qui te dit que ce n'est pas très fiable ? À ma connaissance, la plupart des navigateurs mobiles du marché interprètent les media queries sans broncher. Smiley rolleyes
Pages :