Question

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

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

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

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

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

btw，window.innerWidth，window.innerHeight与我在jQuery中看到的相同

非常感谢。

Answer 1

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

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

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

$(window).resize(function() {
 $('body').text($(window).width() + ' X ' + $(window).height());
});

Answer 2

这在P5 setup（）中对我有用：

size(window.innerWidth, window.innerHeight);

Answer 3

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

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>

如何修复：在jQuery检测到宽度和高度之前显示默认大小，并且在我手动刷新之前它不会调整大小

3 个答案: