如何根据屏幕大小

Question

我有一个热图应用程序和存储我存储了单击的x，y坐标以及视口宽度和高度。 2次点击的真实数据：

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

问题是当我在响应式网站上调整屏幕大小时，显示的点击现在全部关闭。我的搜索结果是空的，但有一个公式或算法可以重新计算不同分辨率的x和y坐标。例如，第一次点击，如果width从1257变为990而height从959变为400，则如何我重新计算x和y，以便它们排在同一个位置？

编辑： 我在数据库中添加了2个字段，width_percentage和height percentage 存储宽度的x百分比和高度的y百分比。因此，如果x为433且屏幕宽度为1257，那么x距离屏幕左边缘为35％。然后我对高度使用相同的理论并运行计算，但它没有将点击点缩放到与我相同的位置，尽管百分比将用于缩放分辨率。我通过点击全分辨率1257宽度然后以900宽度重新打开来测试它。请参阅下文，了解以较低分辨率显示点击点的代码。

Ajax PHP

while ($row = mysql_fetch_array($results)) { 
  if( $_GET['w'] < $row['width'] ) {
    $xcorr = $row['width_percentage'] * $_GET['w'];
    $ycorr = $row['y']; 
  }
}

这使用$_GET变量，在页面加载时传递屏幕分辨率的宽度和高度。然后它将数据库中的点击点作为$results。由于我只将分辨率宽度从1257缩放到900，因此我没有计算高度和与初始点击相同的像素。新宽度I乘以百分比，并设置屏幕左侧百分比边距的点。由于百分比是35％ 新的x坐标从左边缘变为900 *.35 = 315px。它无法正常工作，我仍然摸不着头脑，为响应式网站点击同一位置。

Answer 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);
});

Answer 2

您是否尝试过此数学公式来更改数字的范围？

而且不是存储它：

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

您可以将其归档在0和1之间，以便适用于任何width/height（通过将每个x除以width和每个{{ {1}} y}：

height

然后，您不需要知道存储它们时使用的x, y 0.344, 0.357 0.263, 0.858 ，当您想要将它们转换为当前屏幕的大小时，您只需将每个它们乘以当前的width/height width/height。 1}}

Answer 3

我认为你的百分比走在正确的轨道上。你是否包括地图图像的偏移量。我想知道你的算法是否正常工作但是视觉表示看起来是错误的，因为视口中的偏移正在改变。

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

您需要每次都添加偏移以获得正确的位置。

Answer 4

这是你应该做的。有时在解析文档时会触发resize事件。将代码放在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>

Answer 5

为此你需要做一些计算。这是一个函数，它将根据高度和宽度返回新的x和y药水

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

您可以使用常用函数进行高度和宽度计算。

DEMO

Answer 6

整个问题在很大程度上取决于您要使用此页面的页面。 大多数页面具有居中的块和/或一些自调整大小（读取“响应”）元素。如果页面响应不是很快，例如有一个固定的宽度，你有一个更容易的工作。如果页面居中，您可能希望保存光标相对于页面中心的X位置。这样窗口宽度无关紧要。这同样适用于左对齐页面和右对齐页面 - 在这种情况下，您将分别相对于窗口的左边缘或右边缘保存X-pos。

下图显示了面向中心的点击位置。请注意，如果调整窗口大小，则单击的x和y属性不会在此处更改。

现在采用更通用的方法

如果您保存窗口尺寸，每次点击时光标位置和滚动偏移，您很可能能够在布局旁边重现它，但是您需要将其重现为每个独特的尺寸设置。如果您使用了上面的技巧，您可以覆盖所有布局并找到共同点。例如，如果您的页面在窗口中居中，具有最大宽度，并且您相对于窗口中心保存了X-pos，则可以覆盖窗口中至少达到该宽度的所有单击。 / p>

然而，你可以做一些诡计，并将点击的元素与你已经保存的信息一起保存。如果你还保存相对于元素的点击位置，你可以将这些数据评估为“在右下方按下提交按钮”或“人们经常点击该下拉列表的远端，有时候会误点击几个像素“。

Answer 7

请尝试以下两种操作：

1。填充和边距可能无法缩放。在样式表的末尾使用“* {padding：0; margin：0}”并检查是否修复了它。

2。确保外部和内部（意味着所有）元素缩放。任何未能扩展的单个元素都会使许多其他元素不合适。这通常发生在文本输入上。在样式表的末尾使用“* {border：solid 2}”可以直观地观察缩放对每个元素的影响
我相信你的问题会得到解决。