Как пересчитать координаты x, y на основе экранов

Ответ 1

Вы можете получить это через jquery:

$( window ).resize(function() {
  //ur code
});

Javascript

window.onresize = resize;

function resize()
{
 alert("resize event detected!");
}

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

$(window).on("orientationchange",function(event){
  alert("Orientation is: " + event.orientation);
});

Ответ 2

Вы пробовали эту математическую формулу для изменения диапазона числа?

А также вместо этого:

x,   y,   width, height
433, 343, 1257,  959
331, 823, 1257,  959

Вы можете сохранить его нормализованными между 0 и 1, чтобы он работал для любого width/height (рассчитывается путем деления каждого x на его width и каждый y на height):

x,     y
0.344, 0.357
0.263, 0.858

Тогда вам не нужно знать width/height, который вы использовали при их сохранении, и когда вы хотите перевести их на размер текущего экрана, вы просто умножаете каждый на текущий width/height

Ответ 3

Я думаю, что вы на правильном пути с процентами. Вы включаете смещение изображения карты. Интересно, работает ли ваш алгоритм, но визуальное представление кажется неправильным, потому что смещение изменяется в окне просмотра.

$(window).resize(function() {
    var offset = yourMap.offset();
    myLeft = offset.left();
    myTop = offset.top();
});

Вам нужно каждый раз добавлять смещения, чтобы получить правильное размещение.

Ответ 4

Это то, что вы должны делать. Иногда событие изменения размера запускается при анализе документа. Рекомендуется помещать код внутри функции события onload. Функция изменения ориентации берется из ответа @Arun.

window.onload = function() {

  $(window).on("orientationchange", function(event) {
    alert("Orientation is: " + event.orientation);
  });

  window.onresize = function() {
    alert('window resized; recalculate');
  };

};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Ответ 5

для этого вам нужно сделать некоторые вычисления. Вот функция, которая вернет новое зелье x и y, основанное на высоте и ширине

function getNewX(xVlaue, oldWidth, newWidth){
   return xVlaue * newWidth / oldWidth;
}
newX = getNewX(10, 150, 100); // Use

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

DEMO

Ответ 6

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

На следующем изображении показана ориентация кликов по центру. Обратите внимание, что свойства x и y для клика не изменяются здесь, если вы изменяете размер окна.

Теперь к более общим методам

Если вы сохраните размеры окна, позиция курсора И прокрутка прокрутки на каждом клике, вы, скорее всего, сможете воспроизвести его вместе с макетом, но вам нужно будет воспроизвести его для каждый набор уникальных размеров. Если вы использовали трюк сверху, вы могли бы наложить все макеты и найти общий знаменатель. Например, если ваша страница сосредоточена в окне, имеет максимальную ширину, и вы сохранили X-pos относительно центра окна, вы можете наложить все клики, которые произошли в окнах, которые были по меньшей мере той ширины.

Однако вы можете сделать некоторые обманки и сохранить элементы с щелчком рядом с информацией, которую вы уже сохранили. Если вы также сохраните позицию клика относительно элемента, вы можете оценить эти данные примерно так: "кнопка отправки достаточно нажата в нижней правой части" или "люди часто нажимают на дальний конец этого раскрывающегося списка, а иногда и ошибочно -click на несколько пикселей".

Ответ 7

Попробуйте выполнить следующие действия:

1. Отступы и поля могут не масштабироваться. Используйте "* {padding: 0; margin: 0}" в конце вашей таблицы стилей и проверьте, исправляет ли это это.

2. Обеспечьте масштабирование внешних и внутренних (что означает все) элементов. Любой отдельный элемент, не имеющий масштабирования, сделает многие другие элементы неуместными. Это обычно происходит с текстовыми вводами. Используйте "* {border: solid 2}" в конце вашей таблицы стилей, чтобы визуально наблюдать эффект масштабирования для каждого элемента.

Я уверен, что ваша проблема будет решена.