Получить координаты центра веб-страницы на планшетных устройствах с использованием JavaScript

Я пытаюсь вычислить геометрический центр viewport на веб-странице, созданный с помощью планшетных устройств (iOS и Android), то есть фактический ЦЕНТР окна просмотра (что вы видите) в соответствии с текущим трансляция и текущий уровень масштабирования - не хотите центра самого документа, я хочу, чтобы центр экрана просматривал то, что я просматриваю.

Проблема состоит в том, что этот расчет не учитывает какой-либо масштаб (тогда) перевода.

В iOS я попытался с некоторыми из этих ответов на вопрос обнаружить щепотку, чтобы увеличить iOS, Я смог поймать событие "OnZoom", но не получил никакой ценности.

На Android я даже не могу поймать какое-либо событие, связанное с увеличением. Я знаю о событиях touchmove и touchstart, но как я могу отличить тогда, чтобы получить масштаб (и значение масштабирования).

Я использую библиотеку jQuery 1.7.2.

Ответы

Ответ 1

Я сделал демонстрационную страницу которая подтверждена для работы на iPhone iPad, Samsung Galaxy Tab 10. Я только добавил событие click огромный div, поэтому нажмите на экран после масштабирования, чтобы обновить дисплей.

Расчет очень прост, используйте screen.width/window.innerWidth, чтобы получить уровень масштабирования. screen.width всегда будет в пикселях устройства, а window.innerWidth всегда находится в пикселях css, что также учитывает масштаб.

Дальнейший расчет - простая математика:

// round the result down to avoid "half pixels" for odd zoom levels
Math.floor(window.scrollY + window.innerHeight/2);
Math.floor(window.scrollX + window.innerWidth/2);

Чтобы проверить, масштабируется ли пользователь, прикрепите слушателя к window.resize и window.scroll, который загорается после orientationchange, скрывая адресную строку и увеличивая масштаб.

Вот мой демонстрационный JavaScript:

var dot = document.getElementById("dot");
document.getElementById("main").addEventListener("click", function(e) {
    var zoom = screen.width / window.innerWidth;
    alert("zoom: " + zoom + "\n" + "ScrollY: " + window.scrollY);

    dot.style.top = Math.floor(window.scrollY + window.innerHeight/2 - 5) + "px";
    dot.style.left = Math.floor(window.scrollX + window.innerWidth/2 - 5) + "px";

}, false);

Ответ 2

Настройка простой HTML-страницы, я могу приблизиться к центру.

С помощью приведенного ниже кода я просто проверяю ширину и высоту фиксированного div, а затем комбинируя это с смещением документа и некоторыми простыми математиками, чтобы выяснить центр и поместить там одну черную точку. Я могу получить его довольно близко, но это зависит от моего iPhone 4S.

Не пробовали устройства Android.

Я не думаю, что это будет работать на iOS <= 4, поскольку они не поддерживают фиксированное позиционирование.

<style>
#fixed{
position: fixed;
left: 0; right: 0; top: 0; bottom: 0;
background: orange; opacity: 0.25;
}
.black{
  position: absolute;
  top:0;left:0;
  width: 1px; height: 1px;
  background: black;
}
</style>

<body>
<div id="fixed"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>
jQuery(function($){
setInterval(function(){
var top = ($("#fixed").height()/2) + $("#fixed").offset().top;
var left = ($("#fixed").width()/2) + $("#fixed").offset().left;
$("body").append('<div class="black" style="top: '+top+'px; left: '+left+'px;" />');
}, 1500)

});
</script>
</body>

Ответ 3

У меня был запрос клиента на метод определения масштаба страницы в javascript пару лет назад.

В моем случае он хотел, чтобы он работал в приложении facebook. Через iframe canvas/viewport.

Я использовал функции Max и Min

function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}
function getDocWidth() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollWidth, D.documentElement.scrollWidth),
        Math.max(D.body.offsetWidth, D.documentElement.offsetWidth),
        Math.max(D.body.clientWidth, D.documentElement.clientWidth)
    );
}

function getMinHeight(h) {
return Math.min(viewport.currentHeight, getDocHeight(), h);
}

getMinWidth был похож, но мне пришлось применить к нему настройки браузера.

Я создал объект с именем viewport, который сохранил свойства фиксированной позиции div, в частности currentHeight и currentWidth были offsetHeight и offsetWidth элемента div.

Я закончил инициализацию window.intervalTimer для запуска проверок состояния этого div, по сравнению с хранимыми значениями в объекте viewport.

Я уверен, что присоединение или добавление прослушивателей событий не было возможным через iframe.

У меня все еще есть демо-код на заброшенном веб-сайте, который я управляю.. haha http://focalpointproperties.net/vWorker/proj_zoomcontrol.php