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

博客随笔
61
jquery
js
窗口大小自适应
自适应窗口

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

问题描述:

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

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

解决思路:

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


演示代码:

// 监听窗口变化事件
$(window).resize(function () {
  var screenWindth).width();// 当前窗口宽度度
    var screenHeight = $(window).height();// 当前窗口高度
	//这里就可以修改控件的宽高了
	 $("#容器").width(screenWindth);// 设置内容区域高度
	 $("#容器").height(screenHeight);// 设置内容区域高度
	//修改其他style也是可以的
}
解决html2canvas在 iOS15系统浏览器中截图后自动刷新页面问题
KnockoutJS用法 html+js实现mvvm
JS 面向对象编程:因为不能完整支持面向对象3大特性,并不是面向对象的编程语言!
JavaScript、JQuery屏蔽网页右键菜单及禁止复制功能的实现
原生js实现最简单的网页打印例子
jquery如何检测库是否已经加载
js使用jquery.jqprint实现网页局部打印预览的效果
一段判断浏览器是否打开F12调试模式然后关闭网页的JS代码
JQuery 对标签标签内容几种常见的操作例子
AJAX上传Form表单内容和文件
 jquery实现AJAX 表单的同时上传文件
使用async/await语法es5模式下报错regeneratorRuntime is not defined
暂无相关内容...
js网页添加悬浮二次元卡通公仔特效的实现源码下载
Jquery实现的一款 仿微信公众号菜单编辑器
免责声明 部分转载分享内容若侵犯您的权益,还请 邮件联系 侵删