調整瀏覽器窗口的大小

嘿，大家對於整個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>

我基本上使用正常的JavaScript與JQuery的元素，所以這兩種方法都將與此代碼記住讚賞！謝謝！

來源

2013-05-02 Encee_209

可以綁定處理程序後，手動觸發一個resize：'$（窗口）.resize（handlerFn）.trigger（ '調整'）' – m90 2013-05-02 08:22:47

如果我理解你的問題是正確的，那就試着在加載時觸發resize事件。只要把它放在'腳本'塊的最後。

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

來源

2013-05-02 08:25:19 thebreiflabb

THANK YOU !,這就完美地解決了這個問題。我知道我必須用某種方式使用窗口加載，但我明顯在code1的錯誤部分使用它 – 2013-05-02 08:51:43

@ Encee_209這個答案的窗口加載在哪裏？ – tbleckert 2013-05-02 08:59:43

哎呀，我想我是在興奮的下面提到你的答案，因爲我出於好奇而嘗試了兩種方法。對不起，混淆了，再次感謝你們倆！ – 2013-05-02 09:16:41

要手動觸發resize事件看起來像一個黑客，我會調用負載或準備事件的功能。在窗口負載

呼叫windowResize()或文檔準備：

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

窗口負載和記錄準備之間的區別是，窗口負載火災時，一切都已經加載，資產和文檔。一旦文檔準備好被處理，立即文檔就緒。也就是說，如果您需要等待圖像計算畫布上的尺寸，請使用窗口加載，否則只需準備好文檔即可。

來源

2013-05-02 08:23:43 tbleckert

謝謝，我只能「接受」一個答案，但這個工程只是同樣，我把它放在錯誤的地方最初>< – 2013-05-02 08:52:55

調整瀏覽器窗口的大小

回答

相關問題