0

我使用 processing.js 和 jQuery 以及下面的代码来检测浏览器的窗口大小

  void setup() {
    size( $(window).width(),$(window).height() );

但是，默认大小是在jQuery成功检测到宽度和高度之前显示的，并且在我手动刷新浏览器之前不会调整大小。</p>

我正在考虑自动页面刷新。

那么如何在文档加载后告诉计算机刷新页面呢？

顺便说一句，window.innerWidth，window.innerHeight与我在 jQuery 中看到的一样

非常感谢。

4

3 回答 3

0

在 jQuery 中，它应该显示如下分辨率：

alert($(window).width() + ' X ' + $(window).height());

无需刷新页面。对于调整大小，您可以使用

$(window).resize(function() {
 $('body').text($(window).width() + ' X ' + $(window).height());
});
于 2012-09-25T07:36:39.893 回答
0

这在 P5 setup() 中对我有用：

size(window.innerWidth, window.innerHeight);
于 2012-09-25T17:17:10.720 回答
0

我在这里回答了一个类似的问题：

https://stackoverflow.com/a/12717983/1560583

我希望这会有所帮助，我已经在下面重新发布了答案：

以下是我使用 Zerb Foundation 3 响应式 Web 框架、Javascript、jQuery 和 Processing.js 解决此问题的方法。如果您想深入了解源代码，可以查看Living Map Project 。

在 javascript/jquery 中：

// handle page resizing
$(window).resize(function() {
var pjs = Processing.getInstanceById('livingmap');
pjs.resizeSketch(document.getElementById('div_p5canvas').offsetWidth,  document.getElementById('div_p5canvas').offsetHeight);
} );

在您的 .pde 处理 js 代码中（注意：使用 zurb 的基础 3、我定义的网格以及如何将其转换为像素，我觉得计算效果很好：

void resizeSketch(int w, int h) {
  if (w < 680) {
    size(w, floor(float(w)/680*610) - 30);
    } else size(680, 610 - 30);
}

在您的 html 中：

<div class="flex-video widescreen" id="div_p5canvas"
<canvas id="livingmap" data-processing-sources="livingmap_2.pde" style="height:auto; width:auto; focus { outline: 0; }" tabindex="1"></canvas>
</div>
于 2012-10-04T18:47:47.767 回答