Viewport et barre d'adresse
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:
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 !!
