Сохранять размер div (относительно экрана), несмотря на уровень масштабирования браузера

Question

Я создаю букмарклет для своего iPhone, который добавит меню прокрутки в верхний левый угол экрана.Проблема, с которой я столкнулся, заключается в том, что если я посещаю сайт, который можно увеличить, то при увеличении моего «плавающего» div становится больше, когда я увеличиваю страницу.Есть ли способ, чтобы мой div был шириной .2 дюйма (можно измерить, если можно так выразиться, с помощью измерительной ленты), независимо от того, как далеко я увеличу свой браузер Safari?

Answer 1

Это решение, которое я наконец-то нашел (с большим количеством комментариев.)

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

Answer 2

Safari iPhone - Как определить уровень масштабирования и смещение?

Возможно, вы также захотите проверить ответы на этот вопрос, так как они предоставляют информацию о том, как вы на самом деле можете рассчитать уровень масштабирования (хотя рекомендуется не полагаться на него для важных вещей). Если все остальное терпит неудачу, имея значение масштаба, вы можете написать небольшой скрипт, чтобы настроить размер вашего div на его основе.

Надеюсь, это поможет.

Answer 3

Вы можете использовать процентные положения и ширины, которые не зависят от увеличения.

Поймать событие масштабирования браузера в JavaScript