調整檢測瀏覽器窗口的大小

Question

嘿，每個人對於整個JS和JQuery場景都是非常新的，需要一點幫助。 進行了幾次搜索，但我找不到解決方案或忽略了它（甚至錯誤地實現了它）。

我使用CreateJS創建了一個站點，並設法使調整大小工作得很好（使用在這里找到的一個小JQuery）。 但是，該代碼僅適用於調整大小，而不是當我以最小化狀態加載瀏覽器窗口時（基本上將整個畫布加載為全屏狀態，從而切斷了站點）。

我正在嘗試使該站點在任何分辨率和移動設備上都能自動查看。 這是我正在使用的代碼，某些方向會很棒！

<script>
var canvas, stage, exportRoot;



function init() {
canvas = document.getElementById("canvas");
images = images||{};

var manifest = [
    {src:"images/Bitmap1.png", id:"Bitmap1"},
    {src:"images/Bitmap2.png", id:"Bitmap2"},
    {src:"images/Bitmap3.png", id:"Bitmap3"},
    {src:"images/Bitmap4.png", id:"Bitmap4"},
    {src:"images/facebook.png", id:"facebook"},
    {src:"images/mainbg.jpg", id:"mainbg"},
    {src:"images/mainbglarge.jpg", id:"mainbglarge"}
];

var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(manifest);
}


//resize jquery
(function($){
  $(window).resize(function(){
    windowResize();                      
  });         
})(jQuery);

function windowResize(){
   stage.canvas.width = window.innerWidth;
   stage.canvas.height = window.innerHeight;    
   var test = (window.innerWidth/1680)*1; 
   exportRoot.scaleX = exportRoot.scaleY = test;
}

function handleFileLoad(evt) {
    if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}

function handleComplete() {
    exportRoot = new lib.strikersite_html5Resize();

    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot);
    stage.update();
    stage.enableMouseOver();

    createjs.Ticker.setFPS(12);
    createjs.Ticker.addEventListener("tick", stage);
}
</script>

我基本上是使用帶有Jquery元素的常規Javascript，因此考慮到此代碼，兩種方法都將不勝感激！ 謝謝！

Answer 1

手動觸發調整大小事件似乎很容易，我會在load或ready事件中調用該函數。

在窗口加載或准備好文檔時調用windowResize() ：

$(window).load(windowResize());

窗口加載和文檔就緒之間的區別在於，窗口加載會在所有內容，資產和文檔都加載完畢后觸發。 准備好操作文檔后立即觸發文檔就緒。 就是說，如果需要等待圖像來計算畫布上的尺寸，請使用窗口加載，否則只需准備好文檔即可。

Answer 2

如果我正確理解您的問題，請嘗試在加載時觸發resize事件。 只需將其放在“腳本”塊的末尾即可。

$(function() {
    $(window).trigger('resize');
});