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

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

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

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

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

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

10
android center jquery zoom zooming

3 ответов

Я демо-страницы что подтверждено для работы на 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 

<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>
1

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

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

я использовал функции 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.

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

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

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

1