Discussion :

[kap]

Bonjour à tous,

Je dois faire du responsive design pour adapter un site à l'affichage sur smartphones. Pour l'instant je m'intéresse seulement au comportement sous IPhone.
J'ai une iframe dans ma page HTML qui contient une carte Google Maps. Mon but est est que ma page entière tienne sur l'écran (difficulté de scroller avec le doigt si on est sur la carte...). Pour faire ça, je calcule la hauteur de l'iframe en fonction du viewport.
Pour des raisons de lisibilité, je veux aussi que la barre d'adresse ne s'affiche pas.

J'arrive plus ou moins à faire ça. Mon problème se situe au changement d'orientation de portrait à paysage. Le viewport ne prend pas en compte la barre d'adresse ce qui fait planter mes calculs...
Voici le code concerné :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
function fnGetHeight() {
		var viewportwidth;
		var viewportheight;
		// The more standards compliant browsers (mozilla/netscape/opera/chrome/IE7) use window.innerWidth and window.innerHeight
		if (typeof window.innerWidth != 'undefined') {
			viewportwidth = window.innerWidth;
			viewportheight = window.innerHeight;			
		}
 
		// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
		else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
			viewportwidth = document.documentElement.clientWidth;
			viewportheight = document.documentElement.clientHeight;
		}
		// older versions of IE
		else {
			viewportwidth = document.getElementsByTagName('body')[0].clientWidth;
			viewportheight = document.getElementsByTagName('body')[0].clientHeight;
		}
		//alert('Your viewport width & height is ' + viewportwidth + 'x' + viewportheight);
		return viewportheight;
	}
 
	function resize(h) {
		alert("h: " + h);
		banner = document.getElementById("logo_gauche").firstChild.height;
		alert(banner);
		var valeur1 = h;
		alert("valeur1: " + valeur1);
		document.getElementById("carte").height = valeur1 + "px";
	}	
 
function bob(){
		if(!window.pageYOffset){ hideAddressBar(); }
		resize(fnGetHeight());
	}
 
	window.addEventListener("orientationchange", bob);
	window.addEventListener("onresize", bob);

La page web se trouve ici.

Merci d'avence pour votre aide !!

[NoSmoking]

Bonjour,
j'ai un peu de mal à comprendre la notion de "barre d'adresse".

As tu essayé les media queries ?

[kap]

Bonjour,

Merci pour ta réponse. Désolé pour les explications pas très compréhensibles

Par barre d'adresse, j'entends la barre du navigateur (Safari) où l'on peut taper l'URL et faire des recherches. J'adapte bien mon CSS avec des media queries, sauf pour l'iframe où je le gère en JavaScript.
Je n'arrive pas à faire cohabiter les deux codes JavaScript :
* celui qui cache la barre du navigateur
* celui qui spécfie la taille de l'iframe

Est-ce que c'est plus compréhensible?

[SylvainPV]

On ne peut pas cacher la barre d'adresses (URL), elle fait partie du navigateur du client. Néanmoins avec quelques hacks, le plus connu étant de scroller à 1px du bord de la page en Javascript, on peut parvenir à faire en sorte qu'elle soit masquée à l'ouverture de la page.

Peux-tu nous montrer le code de la fonction hideAdressBar() ?

[kap]

Oups, pardon, je pensais l'avoir mis dans le premier message... Effectivement, c'est ce que fait le code que j'ai trouvé : un scroll d'un pixel.

Code :

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

1
2
3
4
5
6
7
8
	function hideAddressBar(){
		if(!window.location.hash){
			if(document.height < window.outerHeight){
				document.body.style.height = (window.outerHeight + 50) + 'px';
			}
			setTimeout( function(){ window.scrollTo(0, 1); }, 50 );
		}
	}

[SylvainPV]

Bon il y a peu de chances que tu parviennes à masquer automatiquement la barre d'URL à tous les coups, mais essaie quand même ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function hideAddressBar() {
      window.scrollTo(0, 1);
}
 
function bob(){
      resize(fnGetHeight());
      setTimeout(hideAddressBar, 0);                
}
 
addEventListener("orientationchange", bob);
addEventListener("resize", bob);
addEventListener("load", bob);

[kap]

Merci pour ta proposition.

J'ai effectué les modifications que tu m'as conseillé mais ça ne convient pas tout à fait :
* lors du load, l'iframe se met à la bonne taille
* mais ensuite, je repasse deux fois dans le calcul de la taille de l'iframe, et au final, il calcule une taille plus grande. Du coup mon iframe ne tient pas en entier sur l'écran, ce qui est gênant puisqu'un bouton contenu dans l'iframe n'est alors pas visible.

[SylvainPV]

Il faut dire que le redimensionnement en dur en Javascript, ce n'est pas top pour une approche responsive. As-tu essayé toutes les solutions en CSS uniquement ? Par exemple width:100% couplé à max-height: 100% ? Ou alors deux media-queries, une pour chaque orientation.

[sekaijin]

comme toujours je demande
A quoi ça sert d'essayer de tenter de passer outre les choix de l'utilisateur quant à son navigateur ?

avec WebKit je te fais un anvigateur MacOS en moins de 3 minutes
tu n'auras alors aucun moyen de maitriser quoi que ce soit.

le navigateur c'est l'outil du client
le document c'est l'espace mise à disposition du web développeur

chancun chez soit.

A+JYT

[kap]

Bonjour,

Je reviens sur ce sujet après avoir du travailler sur un autre projet :

@SylvainPV : j'effectue déjà plueisuers media queries pour gérer les deux orentations. Le code CSS a été réalisé par quelqu'un d'autre. Il n'avait pas trouvé de solutions pur CSS pour gérer ça. C'est pour cette raison qu'on a opté pour un code javascript de calcul de viewport.

@sekajin : je veux juste masquer la barre d'adresse à l'affichage pour que la carte soit plus grande. L'utilisateur peut tout à fait la réafficher quand il le souhaite.

[kap]

Apparemment le hack pour masquer la barre d'adresse ne fonctionne plus avec la nouvelle version de Safarie IOS 7 : http://www.mobilexweb.com/blog/safar...ms-apis-review . Du coup je vais conserver mon script pour resizer en fonction du viewport