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

ここで同様の質問に答えました：

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 に答える
0

これは、P5 setup() で、私にとってはうまくいきました:

size(window.innerWidth, window.innerHeight);
于 2012-09-25T17:17:10.720 に答える