『QQ:1353814576』

jquery 实现网页页面内容自适应窗口的宽度


最近碰到一个陈年老项目,是一个定制的web网页管理端,一开始设计的时候就没有考虑设备屏幕尺寸的问题采用了固定电脑显示器大小做的开发 实际也就是写死了宽高比例做的界面开发,当时客户机器是统一购买的所以很长一段时间运行都没有啥问题

问题描述:

没成想用了几年原来的老古董机器最近挂了几台 估计性能也确实是不够用了,显示器也随之更新换代了,然后就有了多台用户电脑显示器比例也不一致(有老古董有新设备),用户打开显示效果就不是全屏了 而且比例也变得很奇怪 怎么看怎怎么难受,为了兼容不同大小的显示器,原本是考虑要不要用bootstrap或者css重写给重构了,但最终理智告诉我 还是本着能用就尽量少改的原则高高得了,最后就只改了前端页面的一段js 实现动态更新内容宽高 给凑合解决了


解决思路:

使用jquery的(window).resize()事件去监听浏览器窗口的的变化事件 从而获取到当时的窗口宽高 然后将网页内容容器进行动态设置宽高 以及根据宽高比例设置字体大小 从而完成自适应


演示代码:

// 监听窗口变化事件
$(window).resize(function () {
  var screenWindth).width();// 当前窗口宽度度
    var screenHeight = $(window).height();// 当前窗口高度
	//这里就可以修改控件的宽高了
	 $("#容器").width(screenWindth);// 设置内容区域高度
	 $("#容器").height(screenHeight);// 设置内容区域高度
	//修改其他style也是可以的
}