儘管瀏覽器縮放級別仍然保持div大小（相對於屏幕）

Question

我正在爲我的iPhone創建一個小書籤，它將在屏幕的左上角添加滾動菜單。我碰到的問題是，如果我訪問一個可以放大的網站，當我放大頁面時，放大「浮動」div會變得更大。無論我放大我的Safari瀏覽器多遠，是否有辦法讓我的div的寬度爲0.2英寸（可以用捲尺衡量，可以這麼說）？

感謝， 奧利弗

Answer 1

你可以用百分比位置和寬度，它不受變焦。

Catch browser's "zoom" event in JavaScript

Answer 2

Safari iPhone - How to detect zoom level and offset?

您可能還需要檢查這個問題的答案，以及他們提供關於如何才能實際計算縮放級別（儘管它正在對依賴於它的建議信息重要的東西）。如果一切都失敗了，具有縮放值，您可以編寫一個小腳本來根據它調整div的大小。

希望這會有所幫助。

Answer 3

這是我終於想出瞭解決方案（有很多的評論。）

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