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