Javascript 如何使PhantomJS屏幕截图尺寸与实际网页相对应？

我正在用PhantomJS从我的网页上截图。代码很简单

var page = require('webpage').create();
page.open('Target_Zone_Selection.html', function () {
    page.viewportSize = {width: 1024, height: 800};
    page.render('test.png');
    phantom.exit();
});

一切正常，但我想做的是使屏幕截图与实际网页相对应（在具有精确视口大小的浏览器上看到）。我的最终目标是获得鼠标位置，并在屏幕截图上对应此位置

还有一个问题：网页大小不同于PhantomJS的渲染。我已经尝试了几种解决方案，比如遍历DOM并获取每个偏移位置以找到屏幕快照的维度，但始终存在一个问题。此方法适用于宽度，但不适用于高度

有人能描述一种使网页和截图对应的方法吗？非常感谢

更新： 问题被发现了：我的网页包含画布、按钮、文本表单和一些html。使用PhantomJS渲染后，唯一不提供相同大小的元素是按钮。。。不同浏览器的按钮呈现方式也不同

---

有没有关于预测按钮渲染大小的建议？

您是在谈论移动设备的视口标记吗？像PhantomJS这样的“桌面”浏览器不支持视口。您需要查看支持移动浏览器的工具或服务（如）

不，我指的是从整个网页（例如，在桌面浏览器上看到的）中截图，并使此截图与实际网页尺寸相对应。目标是在屏幕截图上显示鼠标位置（在实际网页中）。为此，我需要使尺寸对应。无论如何，谢谢你的提议。