Déviation conditionnel Home page

**ZDamienZ** · 07/01/2013, 05h51

Re : Déviation conditionnel Home page

Bonjour,

Il faut que tu adaptes ton fichier css et non rediriger vers un page.
Si tu n'as pas la même chose sous Mac que sous Windows ce n'est pas normal, ou alors c'est qu'il manque des polices.

Il faut à mon avis débugger ta feuille de style.

Voici quelques pistes:

Tu peux utiliser les commentaires conditionnels pour détecter si c'est un windows ou pas et adapter ta feuille de style

Exemple issu de html5 boilterplate

Code:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

Si c'est fonction de la dimension de ton écran tu peux jeter un coup d'oeil sur les media queries mais c'est du css3.
Sinon avec mootools je crois que c'est

Code:

window.getSize()

Enfin la redirection n'est à mon avis pas la solution.

Damien.

**carbonathus** · 07/01/2013, 08h52

Re : Déviation conditionnel Home page

Salut Damien,

C'est vraiment super sympa tes infos.

Mais il s'agit vraiment d'une question de qualité d'écran. J'ai installé le font QuickSand, que je j'apprécie beaucoup, très proche de celui utilisé par la chaîne de TV Antenne 2 (qui a un très beau design à mes yeux). Mais c'est un font super "Light" qui s'affiche super bien sur les Macs (et encore mieux avec un écran Thunderbold) mais nettement nettement moins bien sur des écrans bas de gamme généralement utilisés par les PC. A remarquer qu'avec un écran de qualité, le PC l'affichera tout aussi bien que le Mac. Mais à remarquer aussi que c'est souvent les pros qui investissent dans l'écran, la grande majorité des utilisateurs PC ont des mauvaises résolution (écran à 3 ou 400 euros). Et donc, c'est à prendre en compte.

Il doit aussi y avoir un problème de licence, parce que étonnamment, IE sur PC (bas de gamme), l'affiche plutôt mieux que les autres navigateurs (opera catastrophique). Avec IE, c'est acceptable, pas mal du tout ! Marrant ça d'ailleurs....

Cela dit, ma "cliente" (qui a un Mac) adore cette police (qui personnalise bien son site) et ne veut pas en changer. Moi, en tant que Webmaster, je suis obligé de lui dire qu'il n'est pas possible d'ignorer les PC. D'où la demie mesure, ou le compromis, de la redirection vers un profil du site avec un autre font et d'autres CSS (pour les alignements surtout). En soi, ce n'est pas un très gros boulot, c'est jouable... Mais je suis d'accord, dans le principe c'est vraiment pas terrible (uniformité etc).

Je vais convaincre la "cliente" de renoncer à cette Police (c'est aussi de ma faute, j'aurais dû vérifier plus vite sur PC).

Mais quand même, la redirection est un sujet qui m'intéresse, ça peut dans certains cas s'avérer pas mal (pour iPhone et autres nouveaux appareils aux résolutions mini, ou redirection en fonction de l'IP ou.....). J'aimerais bien maîtriser cette fonction.

L'idéal serait sûrement un code php, mais là, c'est mon grand regret : je ne code pas encore en php (j'envisage une formation). Le java est plus simple, même si pour lui aussi, je dois faire attention, c'est une porte pour le piratage et je ne le maîtrise pas assez pour être sûr que je ne prends pas de risque.

C'est pour ça que j'ai lancé ce post.

Mais ce que tu me présentes est intéressant, ça pourra aussi être très utile dans une autre circonstance. Je le garde :O)

Voilà voilà, je pense que tu vois mieux ce que je voulais dire.

Bonne journée à toi.

BT

**ZDamienZ** · 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

**carbonathus** · 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

**ZDamienZ** · 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:

<!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="style.css">
<![endif]-->

Damien

**carbonathus** · 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

**ZDamienZ** · 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

**carbonathus** · 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

**carbonathus** · 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. });

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

**ZDamienZ** · 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

**carbonathus** · 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.

**ZDamienZ** · 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

**carbonathus** · 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

**carbonathus** · 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

Déviation conditionnel Home page

Déviation conditionnel Home page

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association