Script qui s'affiche mal

Version imprimable

Bonjour, un site de jeux en html5 propose un code js à intégrer dans ses pages web. Le problème est que le jeu s'affiche en tout petit..j'arrive pas à l'agrandir, sauf si je met des valeurs en px dans

Code:

'gamewidth':'600px', 'gameheight':'800px'

et je voudrai pourtant que le jeu soit responsive et donc vue sur toutes les plateformes. Je sais pas si c'est mon theme qui pose probleme ou autre chose ..c'est la galère.

Image : http://img4.hostingpics.net/pics/440792Capturer.jpg

Le script
Code:

1 2 3 4 5 6 7 <script type='text/javascript' id=874156> (function(d, gn,scriptId){ var prop = {'agent': 'publisher', 'bgcolor':'#fff', 'wrapperwidth':'100%', 'wrapperheight':'100%', 'gamewidth':'100%', 'gameheight':'100%', 'fullscreen_on_mobile':'true'}; jsid = 'sgEmbedJS';if( d.getElementById(jsid) ) {embed(d,scriptId,gn, prop); } else { var s = d.createElement('script'); s.id = jsid; s.type = 'text/javascript'; s.onload = function(){embed(d,scriptId,gn, prop);}; s.src='http://publishers.softgames.de/embedder.js'; d.getElementsByTagName('head')[0].appendChild(s);} }(document,'submarine-dash',874156)); </script>
Merci d'avance pour votre aide ;)

Bonjour, j'ai trouvé ceci en essayant un peu:

utiliser les em est bien pratique dans le cas ou l'on cherche à faire du responsive design,
essaie ce code dans une page vierge pour voir le résultat:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE HTML>
<html style="display:block; width:100%; height:100%; position:relative;">
<head>
</head>
<body style="display:block; margin:0; width:100%; height:100%; position:relative;">
<script type='text/javascript' id=874156>
    (function(d, gn,scriptId){
    var prop = {'agent': 'publisher', 'bgcolor':'#fff', 'wrapperwidth':'100%', 'wrapperheight':'100%', 'gamewidth':'100em', 'gameheight':'100em', 'fullscreen_on_mobile':'true'};    jsid = 'sgEmbedJS';if( d.getElementById(jsid) ) {embed(d,scriptId,gn, prop); } else {
    var s = d.createElement('script'); s.id = jsid; s.type = 'text/javascript'; s.onload = function(){embed(d,scriptId,gn, prop);};
    s.src='http://publishers.softgames.de/embedder.js'; d.getElementsByTagName('head')[0].appendChild(s);}
    }(document,'submarine-dash',874156));
    setBodyFontSize();
    window.onresize=function () { setBodyFontSize() };
    function setBodyFontSize() {
         var w=document.body.offsetWidth;
         var h=document.body.offsetHeight;
         if (w<h) {
              document.body.style.fontSize=10*(w/1000)+"px";
         } else {
              document.body.style.fontSize=10*(h/1000)+"px";
         }
    }
</script>
</body>
</html>

reste plus qu'à mettre ça dans ta page en adaptant; note un responsive design en % ne sera jamais parfait, il faut passer par les em avec la fonction que je t'ai donnée, les em héritent par enfant de la propriété em ascendante, donc attention: si tu fais un enfant à 1.2em en fontsize d'un parent à 1.2em, l'enfant aura 1.44em en résultante.

18/09/2014, 10h44
Gwenm
Bonjour 01001111 , merci pour ton aide, j'ai fini par comprendre que les sites en html 5 comme le mien ne prenait pas en compte le 100% height. J'ai donc ajouté ceci :
Code:

1 2 html, body { height: 100%; width: 100%; margin-top: 30px; } div { height: 100%; width: 100%; }
et ca fonctionne ;)

ok content que tu aies trouvé.
mais pour un vrai responsive design, si tout ton site doit l'être pense à utiliser les "em" avec une fonction de ce genre:
Code:

1 2 3 4 5 6 7 function setBodyFontSize() { var w=document.body.offsetWidth; document.body.style.fontSize=10*(w/1000)+"px" } window.onload=function () { setBodyFontSize(); }; window.onresize=function () { setBodyFontSize() };

18/09/2014, 11h06
Gwenm

Ok, j'y penserais :lol: merci encore :pingoin2:
18/09/2014, 18h39
Gwenm

J'ai testé ton code, et ca fonctionne parfaitement. Je pense aussi que c'est plus propre que mon

Code:

div { height: 100%; width: 100%; }

:mrgreen: merci encore :merci:
18/09/2014, 21h35
01001111

content que ça te plaise,
bonne soirée ;)
19/09/2014, 10h42
Gwenm

j'ai un petit souci que je n'arrive pas à comprendre. Du coup mon texte s'affiche tout petit dans ma page. Quand je regarde avec firebug, j'ai un

Code:

font-size: 6.15px;

qui s'ajoute dans

Code:

<body style="display: block; margin: 0px; width: 100%; height: 100%; position: relative;">

alors que si j'affiche le code source de la page le script reste le même. D'où vient ce "font-size: 6.15px;" ?

Même si je tente d'ajouter un font-size au script ce n'est pas pris en compte..

Code:

<body style="display: block; margin: 0px; width: 100%; height: 100%; position: relative; font-size: 14px;">
19/09/2014, 14h50
01001111

c'est du au script que je vous ai donné, c'est pour faire du responsive en em sur la taille des polices, si vous n'en voulez pas, ne l'utilisez pas, sinon il faut définir les polices en em par la suite
par exemple: dans la taille d'écran que vous aviez en obtenant 6.15px, 2em donnent 12px en taille résultante sur un élément.
attention: les em héritent entre eux de la propriété em ascendante: un div 1.2 em dans un div 1.2em, ça donne 1.44em.

vous pouvez aussi conserver mon script et repasser en pixels mais pour ça, c'est à un élément enfant, pas au body qu'il faut affecter une valeur en pixels
19/09/2014, 15h40
Gwenm

heu...je c'est pas si j'ai bien compris :pastaper: moi je voudrais garder votre super script et redonner la taille initial de mon texte :oops:
19/09/2014, 16h57
01001111

alors tu affectes à tous les éléments enfants de body qui ne sont pas le jeu lui-même une taille de police (font-size) en px
19/09/2014, 17h25
Gwenm

ok, merci pour ton aide :P
19/09/2014, 19h29
Watilin

Citation:

Envoyé par Gwenm

[…] les sites en html 5 comme le mien ne prenait pas en compte le 100% height.

En fait c'est un peu plus compliqué. (Et ça n'a rien à voir avec HTML 5.)

Comme indiqué sur le MDN, le 100% est calculé à partir de la hauteur de l'élément parent. Si ce dernier n'a pas une hauteur spécifiée explicitement, le 100% est remplacé par auto, qui est la valeut par défaut pour height. Autrement dit, il est carrément ignoré.

Ça explique pourquoi tu as dû ajouter 100% aux éléments html et body.
19/09/2014, 19h42
Gwenm

merci pour ces explications. Je comprend pas pourquoi l'éditeur des jeux fournis un code qui fonctionne pas et qu'on doit y passer 3 jours pur l'intégrer correctement dans son site. Surtout que de leur côté ils disent que ca s'affiche bien, alors je comprend rien :aie:
19/09/2014, 21h05
Gwenm

mais est ce que c'est possible d'utiliser les valeurs width et height en px et que le contenu soit quand même responsive ?
19/09/2014, 21h31
01001111

sur cette dernière question: non, si tu bloques le conteneur avec des pixels, ce ne sera pas responsive.
par contre l'usage des % l'est si comme dit watilin, tu spécifies en 100% en width et height et que tu les appliques aussi aux éléments html et body
19/09/2014, 21h38
Gwenm

ok, merci infiniment pour votre aide :ccool: