ページを更新せずにページのサイズを変更してhtml要素を再読み込みするにはどうすればよいですか？

Question

ページ全体のサイズを変更しても、ページ全体を再描画せずにhtml要素（キャンバス）を再ロードしたいと考えています。それは可能ですか？

ありがとうございます！

Answer 1

リロードする必要があるhtml要素が正確にわかっていませんが、可能である必要があります。

ここでは、jQueryの例で、ページのサイズが変更されたときに確認します。

$(window).on('resize', function(){ 
     var win = $(this); //this = window 
     if (win.height() >= 820) { /* ... */ } 
     if (win.width() >= 1280) { /* ... */ } 
}); 

Javascriptの例：

window.onresize = function() { 
    if (window.innerHeight >= 820) { /* ... */ } 
    if (window.innerWidth <= 1280) { /* ... */ } 
} 

そして、あなたの目的のウィンドウの高さや幅のif文の中に、あなたのキャンバスをリロードする機能を呼び出すことができます。

Answer 2

あなたは、イベントリスナーを追加することができ

window.onresize = function(){ 
    var oldcanv = document.getElementById('canvas'); 
    document.removeChild(oldcanv) 

    var canv = document.createElement('canvas'); 
    canv.id = 'canvas'; 
    document.body.appendChild(canv); 
}