Maintenir la taille div (par rapport à l'écran) malgré le niveau de zoom du navigateur

Question

Je crée un bookmarklet pour mon iPhone qui ajoutera un menu déroulant dans le coin supérieur gauche de l'écran. Le problème que j'ai rencontré est que si je visite un site qui peut être agrandi, quand je zoome, mon div "flottant" devient plus grand que je zoom dans la page. Y at-il un moyen pour que mon div soit .2 pouces de large (mesurable avec un ruban à mesurer, pour ainsi dire), peu importe à quelle distance je zoom dans mon navigateur Safari?

Merci, Oliver

Answer 1

Vous pouvez utiliser des positions de pourcentage et largeurs, qui ne sont pas affectées par le zoom.

Catch browser's "zoom" event in JavaScript

Answer 2

Safari iPhone - How to detect zoom level and offset?

Vous pouvez également vérifier les réponses à cette question aussi bien qu'ils fournissent des informations sur la façon dont vous pouvez calculer réellement le niveau de zoom (bien qu'il est en cours de déconseillait fier pour choses importantes). Si tout le reste échoue, ayant la valeur de zoom, vous pouvez écrire un petit script pour ajuster la taille de votre div basé dessus.

Espérons que cela aide.

Answer 3

Ceci est la solution que je suis finalement arrivé avec (avec beaucoup de commentaires.)

//This floating div function will cause a div to float in the upper right corner of the screen at all times. However, it's not smooth, it will jump to the proper location once the scrolling on the iPhone is done. (On my Mac, it's pretty smooth in Safari.) 

function flaotingDiv(){ 

    //How much the screen has been zoomed. 
    var zoomLevel = ((screen.width)/(window.innerWidth)); 
    //By what factor we must scale the div for it to look the same. 
    var inverseZoom = ((window.innerWidth)/(screen.width)); 
    //The div whose size we want to remain constant. 
    var h = document.getElementById("fontSizeDiv"); 

    //This ensures that the div stays at the top of the screen at all times. For some reason, the top value is affected by the zoom level of the Div. So we need to multiple the top value by the zoom level for it to adjust to the zoom. 
    h.style.top = (((window.pageYOffset) + 5) * zoomLevel).toString() + "px"; 

    //This ensures that the window stays on the right side of the screen at all times. Once again, we multiply by the zoom level so that the div's padding scales up. 
    h.style.paddingLeft = ((((window.pageXOffset) + 5) * zoomLevel).toString()) + "px"; 

    //Finally, we shrink the div on a scale of inverseZoom. 
    h.style.zoom = inverseZoom; 

} 

//We want the div to readjust every time there is a scroll event: 
window.onscroll = flaotingDiv;