2011-01-11 158 views
0

我正在使用javascript函數根據用戶屏幕分辨率使用onload事件重置3個DIV的樣式。加載Javascript屏幕分辨率重置

if(screen.width > 1024 && screen.width < 1300){ 
document.getElementById('wrapper').style.width = '1250px'; 
document.getElementById('innerwrapper').style.width = '1250px'; 
var elms = getElementsByClassName("colmask", "div")[0].style.width = '1250px'; 
} 
if(screen.width > 1300 && screen.width < 1500){ 
document.getElementById('wrapper').style.width = '1350px'; 
document.getElementById('innerwrapper').style.width = '1350px'; 
var elms = getElementsByClassName("colmask", "div")[0].style.width = '1350px'; 
} 
if(screen.width > 1500){ 
document.getElementById('wrapper').style.width = '1580px'; 
document.getElementById('innerwrapper').style.width = '1580px'; 
var elms = getElementsByClassName("colmask", "div")[0].style.width = '1580px'; 
} 

問題是每次用戶導航到新頁面時,屏幕會在加載頁面後自動調整其大小。有沒有辦法避免不得不一直調整頁面大小?如果你決定使用jQuery

+2

的地方,如果你能原諒我的拙鈍一不好判斷,這是一個可怕的想法。不要使用固定寬度的佈局,特別是與像素值相關的佈局。 (爲了保護用戶不受自身限制並固定線條長度,爲了在寬度固定的列中顯示大量散文,有一個有效的參數。)製作可用於屏幕的動態佈局以及具有不同分辨率和dpi的設備。 – Phrogz 2011-01-11 22:15:35

+0

我同意,僅僅因爲他們的分辨率支持頁面寬度並不意味着他們的瀏覽器已被完全屏蔽。用戶將不得不使瀏覽器足夠大以便根據他們的屏幕分辨率來適應內容。 – Soviut 2011-01-11 22:17:41

回答

0

我的上述評論以及基於瀏覽器的大小,使其動態認同是很容易

所有你需要做的就是var wcontent=$(window).width();

$("#wrapper").width(wcontent); 

,你可以在$(document).ready(function() {}