processing.js 如何检测浏览器的大小？答案

【问题标题】：how can processing.js detect browser's size?processing.js 如何检测浏览器的大小？
【发布时间】：2012-09-08 13:22:26
【问题描述】：

如前所述，processing.js 如何响应浏览器的大小？（响应式设计）我试过 screen.width 和 screen.height 但效果不佳。好像只能检测电脑的屏幕大小。

更重要的是，我想在拖动和更改浏览器大小时与窗口大小保持同步

【问题讨论】：

标签： javascript browser responsive-design processing.js

【解决方案1】：

 size(window.innerWidth, window.innerHeight);

根据https://groups.google.com/forum/?fromgroups=#!topic/processingjs/2-U_P7_BHlY

或

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

根据Get Viewport Width With JQuery and Use In Processing JS

【讨论】：

如果我拖动并更改浏览器的大小会怎样？有什么方法可以让我跟上尺寸的步伐吗？

【解决方案2】：

以下是我使用 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>

【讨论】：