Déviation conditionnel Home page - Forums Joomla.fr

X

ZDamienZ a répondu

08/01/2013, 17h28
Re : Déviation conditionnel Home page

je vote pour
Laisser un commentaire:
lomart a répondu

08/01/2013, 17h18
Re : Déviation conditionnel Home page

Bonsoir,

Je viens de lire votre échange.
Pourquoi ne pas faire simplement une media-querie

La font par défaut est celle pour le PC

body { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; }

et cette média-querie charge la font pour les écrans avec un bon ratio et dont le navigateur sait interpréter les media-queries

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5)
{
body { font-family: "QuicksandLight"; }
}
Laisser un commentaire:
ZDamienZ a répondu

08/01/2013, 16h44
Re : Déviation conditionnel Home page

Non tu n'as pas a rajouter de fichier html a la racine du site. Tu es sur Joomla, pas sur un site statique.

En gros il faudrait que tu crées une page sous Joomla spéciale pour les mauvais ratios et que tu appliques un template spécial à cette page ou alors un style du template pour cette page.

Mais là tu compliques énormément un site qui est simple au départ.

Franchement tu pars dans un truc imbuvable pour pas grand chose.
Même si c'est sympa d'apprendre des trucs, là ce sont des choses super particulières et pointues (javascript, redirections, retina...) qui risquent de t'embrouiller plus qu'autre chose.

Damien
Laisser un commentaire:
carbonathus a répondu

08/01/2013, 13h28
Re : Déviation conditionnel Home page

Mince, m'en sors pas. Suis nul avec ça.... faut que j'apprenne.

- J'ai créé un doc ratio1.html que j'ai placé à la racine du site. ???? sans savoir si il le fallait

- et voici mon head :

<!DOCTYPE HTML>
<html lang="<?php echo $this['config']->get('language'); ?>" dir="<?php echo $this['config']->get('direction'); ?>">

<head>
$(window).on("load", function() {
pixelRatio = !!window.devicePixelRatio ? window.devicePixelRatio : 1;

alert(pixelRatio);
if (pixelRatio == 1) {
document.location.href="ratio1.html";
}
}

<?php echo $this['template']->render('head'); ?>
</head>

- La ligne s'inscrit en haut de la page web, mais pas d'alert, pas de popup. Avec l'autre solution, je n'avais rien d'indiqué dans la console.

- j'ai aussi essayé avec if (pixelRatio < 1) et >. Je n'obtiens pas l'info.

-----------------

Et finalement, je conclus que tous mes écrans ont un ratio de 1, ce n'est donc pas la solution. Car avec ce javascript, l'alerte "This is a high-density screen" arrive sur tous mes écrans (yc le mauvais). DAMNED !!! :

<script>
if (window.devicePixelRatio == 1) {
alert("This is a high-density screen");
} else if (window.devicePixelRatio < 1) {
alert("This is a low-density screen");
}
</script>

B

Dernière édition par carbonathus à 08/01/2013, 15h18
Laisser un commentaire:
carbonathus a répondu

08/01/2013, 12h19
Re : Déviation conditionnel Home page

Excellent, je te tiendrai au courant.
Avec ça pas besoin de Jumi (si je comprends bien). Je vais tester dans le head, et ça me donnera la réponse.
Bonne appétit.
B
Laisser un commentaire:
ZDamienZ a répondu

08/01/2013, 11h29
Re : Déviation conditionnel Home page

Code:

$(window).on("load", function() { pixelRatio = !!window.devicePixelRatio ? window.devicePixelRatio : 1; //au choix console.log(pixelRatio); //ou alert(pixelRatio); if (pixelRatio == 1) { document.location.href="ratio1.html"; } }

le console.log affiche le tout dans la console de débogage de ton navigateur alors que le alert fait une popup mais est beaucoup plus intrusif.

T'en fait pas, moi aussi on me rend service sur le forum, si c'est pas toi c'est un autre mais à la fin on y gagne tous
Laisser un commentaire:
carbonathus a répondu

08/01/2013, 11h21
Re : Déviation conditionnel Home page

ouatcha super Damien !

Je vais utiliser Jumi, un composant visiblement super pour intégrer des codes très simplement dans Joomla (découvert sur post ici et recommandé par Zepelin). Pour faire des tests. ensuite j'intégrerai tout ça dans le Head.

Est-ce que j'abuserais en te demandant un code qui tout simplement me retournera le ratio de l'écran (un simple echo je pense) ?

ça ça me permettra d'analyser le ratio de mon écran bas de gamme, et de définir la bonne condition après.

1 (dans la formule) je ne sais pas exactement ce que ça représente en fait. C'est peut-être 1.5 ou au contraire 0.8 (ou même <1)

Blaise

P.S : je ne sais pas comment, mais il faudra que je puisse te rendre service (la pareille) une fois. C'est trop super ce forum.

Dernière édition par carbonathus à 08/01/2013, 11h24
Laisser un commentaire:
ZDamienZ a répondu

08/01/2013, 10h54
Re : Déviation conditionnel Home page

Oui le pixel ratio doit jouer aussi mais la c'est encore une autre histoire.

Pour ta redirection en fonction du ratio (en utilisant ton code)

Code:

$(window).on("load", function() { pixelRatio = !!window.devicePixelRatio ? window.devicePixelRatio : 1; if (pixelRatio == 1) { document.location.href="ratio1.html"; } }

Damien
Laisser un commentaire:
carbonathus a répondu

08/01/2013, 10h35
Re : Déviation conditionnel Home page

Après quelques recherches, il me semble comprendre que le problème si situe au niveau du pixel-ratio.

Même si le lissage est aussi important. Les deux le sont si je comprends bien (et ça explique certaines choses d'ailleurs)

Généralement utilisé pour changer d'image en fonction de ce ratio (ou densité des pixels).

Je crois que je vais poster un nouveau sujet.

2 articles intéressants :

http://css3.bradshawenterprises.com/blog/retina-image-replacement-for-new-ipad/

Votre blog technologie - Wdfriday

http://wdfriday.com/blog/2012/06/adapter-vos-sites-pour-les-ecrans-retina/

Explorez Wdfriday, votre guide technologique fiable offrant une variété d'articles détaillés pour enrichir vos connaissances.

J'aimerais déjà tester ce qu'une fonction php (ou script java) retourne comme résultat pixel-ratio sur mes différents écrans (dont un bas de gamme). A partir de là, je pourrais peut-être mieux définir une condition et une redirection.

Voilà deux codes qui me semblent s'approcher de ce que je cherche (sauf qu'ils changent d'image là où moi je souhaiterais une redirection) :

--------------------------

De la même manière que l’on peut détecter les largeurs d’un écran en CSS, l’exemple suivant vous permet de cibler sa densité de pixels. Notez que la propriété s’applique à tous les navigateurs pouvant l’interpréter.

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
/*vos styles ici*/
}

-------

1. // Set pixelRatio to 1 if the browser doesn't offer it up.
2. var pixelRatio = !!window.devicePixelRatio ? window.devicePixelRatio : 1;
3. *
4. // Rather than waiting for document ready, where the images
5. // have already loaded, we'll jump in as soon as possible.
6. $(window).on("load", function() {
7. if (pixelRatio > 1) {
8. $('img').each(function() {
9. *
10. // Very naive replacement that assumes no dots in file names.
11. $(this).attr('src', $(this).attr('src').replace(".","@2x."));
12. });
13. }
14. });

------------------------------------------
Laisser un commentaire:
carbonathus a répondu

08/01/2013, 00h38
Re : Déviation conditionnel Home page

Mais si, très cool. no problem...

J'ai trouvé un site qui teste ces fonts et Google fonts pour les deux plateformes. La prochaine fois, j'irai y faire un tour avant d'installer et je vérifierai avant de trop avancer.

En plus, j'ai confondu dpi (point par pouce) avec ppi (pixel par pouce). C'est le ppi qu'il me faudrait (le dpi c'est pour les imprimeurs).

(donc remplacer dpi par ppi dans toutes mes réponses précédentes)

Le problème semble assez courant.

Eh c'est comme ça qu'on apprend.

J'ai visité ton site. Super bien présenté.

Bonne journée

B

Dernière édition par carbonathus à 08/01/2013, 09h18
Laisser un commentaire:
ZDamienZ a répondu

08/01/2013, 00h09
Re : Déviation conditionnel Home page

Eh ben non, je ne suis pas cool!
A ma connaissance il n'y a pas de solution pour connaitre ces dpi et je ne crois pas que ça fasse la différence.

C'est vraiment le lissage qui va faire la différence. Ça se configure directement dans windows.
Je te laisse faire l'essai j'ai pas de PC sous la main. (A partir de windows 7 le lissage est activé par défaut).

Te prends pas trop la tête non plus les gens qui visitent ton site on aussi un des polices pourries sur les autres sites. Ils ne feront pas la différence.

Damien
Laisser un commentaire:
carbonathus a répondu

07/01/2013, 22h37
Re : Déviation conditionnel Home page

Oui, très intéressant ce code conditionnel dans le Head. C'est déjà une super infos cette façon de poser le truc.

Cela dit Damien, si tu regardes bien le site, IE affiche plutôt assez bien ce font sur un PC (même sur écran bas de gamme).

Sur PC, (écran bas de gamme) c'est même le seul à bien l'afficher (Safari, Opera ou même Firefox le font nettement moins bien).

Donc faudrait plutôt ajouter une feuille de style pour tous, sauf IE et Mac. (c'est bien la première fois que IE me surprend en bien), ce qui serait un peu bizarre comme test.

Concernant IE, j'ai lu qu'en fait, IE avait beaucoup investi dans le @Font-face CSS. Bref ils sont forts dans ce domaine.

Comme tu dis, c'est plutôt le lissage qui est en cause (c'est aussi mon avis), et d'après moi, c'est la définition de l'écran en dpi, qui fait vraiment la différence. (peut-être que je me trompe avec cette théorie ???)

J'ai deux PC chez moi, celui que j'ai installé avec un vieil écran Mac (qui était sur mon ancien Power Mac), affiche parfaitement le font. Et je pense que d'autres marques d'écran avec une bonne définition le feront aussi très bien. Mais l'autre PC (écran nul), affiche très mal ce fonts.

Au final pour moi, c'est pas le navigateur ni vraiment Mac ou PC qui fait la grosse différence, c'est les Dpi de l'écran. (mac = 72 / PC= généralement autour des 96 ou >). C'est aussi ce qui fait que tout est toujours plus gros sur PC (sur écran bas de gamme seulement)

Alors existe-t-il un moyen de tester les dpi dans ce code conditionnel ??? ça serait, à mon sens la vraie solution.

Et c'est pour ça que pour faire plus simple, au début, je pensais carrément tester PC (qui lissent bien seulement avec un bon écran) ou Mac (qui lissent toujours très bien) ? Et ne laisser cette police que pour les Mac.

En conclusion et à mon avis, pour ce problème c'est soit on trouve un truc (si il existe ce truc) pour tester les dpi du visiteur

Soit, solution de facilité, je change de font pour me débarrasser du problème (ce que je vais plutôt faire, si vraiment il n'y a pas de formule dpi).

Est-ce que tu es d'accord avec cette conclusion que c'est les dpi qui font la différence ?

Et est-ce que tu connais un test pour ces dpi ?

Si tu réponds à ça, alors là, tu es plus que cool ! parce que je suis conscient que dans le genre pénible, là, je suis au sommet :O)

Un grand merci pour ton attention, en tous cas.

Blaise

Dernière édition par carbonathus à 07/01/2013, 22h50
Laisser un commentaire:
ZDamienZ a répondu

07/01/2013, 20h36
Re : Déviation conditionnel Home page

Il y a un de mes posts qui a disparu.
Bizarre.

Je disais donc qu'à mon avis le problème vient du lissage des polices qui n'est pas le même sur ie que sous osx.

Je pense que la meilleure solution c'est de changer de police sous IE si tu veux vraiment garder cette police pour le reste.
Dans ce cas il faut utiliser un commentaire conditionnel dans le head pour ajouter une feuille de style spéciale IE qui surchargera la font.

Code:



Damien
Laisser un commentaire:
carbonathus a répondu

07/01/2013, 14h10
Re : Déviation conditionnel Home page

Ok, je t'ai envoyé un message.

Voici le lien : http://www.espace-alpha.net

C'est clair que j'ai fait une erreur. Web fonts, je me suis dit c'est bon ! mais..... aïe pas si sûr.

Quelle solution choisir : changement de fonts (tout simplement- mais ça plaît pas à la "cliente") ou redirection en fonction de l'OS ou de la taille écran ou, ce qui serait peut-être encore mieux, de la résolution en dpi (Mais là, certainement qu'il faut les calculer.... ça je sais pas.)

Dans tous les cas, vos idées et conseils sur la redirection (avec un bon codage) est un sujet qui m'intéresse beaucoup.

Et vos avis sur cette question en général seront super bienvenus et j'espère qu'ils pourront être utiles aussi à d'autres.

@mitiés et remerciements d'avance.

BT

Dernière édition par carbonathus à 07/01/2013, 19h48
Laisser un commentaire:
ZDamienZ a répondu

07/01/2013, 12h58
Re : Déviation conditionnel Home page

Dans ce cas pour une redirection:

Code:

var size = window.getSize(); if(size.x<1000){ document.location.href="pc.html"; }

C'est pas sur l'OS qu'il faut que tu joues mais sur la taille écran voir peut être sur l'affichage rétina Apple.

T'aurais une adresse ou on peut voir ça, j'aimerais quand même bien voir cette différence en réel. (en mp si tu veux pas le poster sur le forum)

Damien
Laisser un commentaire:

Précédent 1 2 3 template Suivant

Travaille ...

X