背景
之前写过一个系统是在自己的电脑上调的,页面展示是合适的,但到别人电脑上是很小的一点,看着不是很美观,所以想适配不同的屏幕。
比如在我的电脑上是这样:
在别人电脑上可能是这样(屏幕下方有一大块空白页面):
也可能是这样(右侧出现滚动条):
说明:造成这种情况绝对不是浏览器缩放的原因,都是100%。
那如何让所有人电脑上展示的页面都能占满整个屏幕,不出现空白,也不会有滚动条?
解决办法
通过screen.width获得不同分辨率电脑屏幕的宽度,根据这个宽度调节不同分辨率页面内容的高度,就可以做到适配
var screenw=screen.width;
switch (screenw){
case 1920:
$('#xmlContent').css("height",620);
break;
case 1536:
$("#xmlContent").css("height",486);
break;
case 1280:
$("#xmlContent").css("height",445);
break;
}