2010-08-20 7 views
3

Je suis en train de charger un div et le positionner absolument dans un safari mobile - pensez quelque chose comme la boîte d'alerte.Comment puis-je obtenir la hauteur du chrome safari mobile?

I a essayé d'utiliser un div en position absolue avec ST à 50% avec une marge de la moitié de la hauteur/largeur:

#overlay-message { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    padding: 20px; 
    margin: -67px 0 0 -110px; 
    width: 220px; 
    height: 125px; 
} 

mais comme je l'ai réalisé, la fenêtre va être différente de la position fixe sur la page, et l'élément est affiché dans une position de décalage lorsque le navigateur est en bas. J'ai pensé que je pourrais essayer de déplacer la position en utilisant javascript basé sur la valeur window.pageYOffset, mais malheureusement cela montre 0 si le chrome est montré ou non. Ma dernière pensée a été de calculer la hauteur du chrome du navigateur en utilisant window.outerHeight-window.innerHeight puis de déplacer la div en fonction de cette valeur, mais malheureusement cela ne fonctionne pas.

J'ai essayé (w/jquery):

$(window).load(function() { 
    chrome_height = window.outerHeight - window.innerHeight; 
    alert('chrome height is ' + chrome_height + ' outerheight: ' + window.outerHeight + ', innerheight: ' + window.innerHeight); 
}); 

Mais ce que je trouve est que window.innerHeight et window.outerHeight sont tous les deux les mêmes - 306 (j'ai le chrome développeur de safari) - donc cela ne semble pas fonctionner.

Quelqu'un peut-il me diriger dans la bonne direction à ce sujet?

merci!

-SIMON

+0

Vérifiez ma réponse à la question similaire, pourrait aider un peu http://stackoverflow.com/questions/8205812/jquery-js-ios-4-and-document-height-problems –

Répondre

-3

Tu ne peux pas screengrab Safari sur votre iPhone puis mettre la photo dans Photoshop ou similaire et mesurer? Rappelez-vous les photos prises avec le « bouton d'alimentation bouton home » appuyer sur la touche sont deux fois la taille réelle à l'écran donc diviser votre taille par 2.

+1

J'essaie d'obtenir la hauteur de l'écran de manière dynamique afin que je puisse afficher les actifs sur l'écran en fonction des décalages. Vous ne pouvez pas charger photoshop sur l'iphone, malheureusement;) – Simon

0

Cet article describes the vewport problem, en particulier le grand moment tragique quand vous obtenez non Retina dimensions pour window.innerWidth/Height et Retina en utilisant window.ourerWidht/Height

Questions connexes