Script qui s'affiche mal

**Gwenm** · 15/09/2014, 16h42

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

'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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**01001111** · 18/09/2014, 10h27

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Gwenm** · 18/09/2014, 10h44

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

et ca fonctionne

**01001111** · 18/09/2014, 11h01

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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() };

**Gwenm** · 18/09/2014, 11h06

Ok, j'y penserais

merci encore

**Gwenm** · 18/09/2014, 18h39

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

merci encore

**01001111** · 18/09/2014, 21h35

content que ça te plaise,
bonne soirée

**Gwenm** · 19/09/2014, 10h42

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

font-size: 6.15px;

qui s'ajoute dans

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**01001111** · 19/09/2014, 14h50

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

**Gwenm** · 19/09/2014, 15h40

heu...je c'est pas si j'ai bien compris

moi je voudrais garder votre super script et redonner la taille initial de mon texte

**01001111** · 19/09/2014, 16h57

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

**Gwenm** · 19/09/2014, 17h25

ok, merci pour ton aide

**Watilin** · 19/09/2014, 19h29

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.

**Gwenm** · 19/09/2014, 19h42

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

**Gwenm** · 19/09/2014, 21h05

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 ?

**01001111** · 19/09/2014, 21h31

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

**Gwenm** · 19/09/2014, 21h38

ok, merci infiniment pour votre aide

Script qui s'affiche mal

JavaScript

Discussions similaires

Partager

Partager