2011-01-11 97 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() {}