项目解决问题记录：兼容win7下IE7，页面缩放后，整个页面保持不变

最新推荐文章于 2024-04-30 01:52:24 发布

阿炜死了

最新推荐文章于 2024-04-30 01:52:24 发布

阅读量408

点赞数

文章标签： web c# 页面缩放

本文链接：https://blog.csdn.net/xzwwjl1314/article/details/116914497

版权

1.需求

公司是做的汽车检测整套软硬件设备。检测过程中的视频要和车管所进行对接，所以专门有个检测视频管理系统。现在浙江那边的车管所要求页面在125%、150%比例下，整个页面保持不变，仅仅是左侧菜单的文字跟随缩放比进行变化。
页面如下：
在这里插入图片描述
页面结构如下：

拿到页面的缩放比，在window.onresize事件里监听页面缩放变化。获取页面能看到的所有dom，让它的宽、高、字体大小都按照 正常缩放比下的大小 / 当前页面缩放比例。

左侧区域宽度默认是280px。整个右侧区域是定位到右边的left: 280px;top: 0;bottom:0;right: 0。所以这两个大的区域在缩放比改变后，我们仅需改变他们的宽度和距左边的距离即可。

视频区域也是定位在右侧区域里的left: 0;right:0;top: 46px;bottom: 50px;。在页面缩放比改变后，我们也是改变它的top和bottom值就好了，同时我们还要让里面的视频（vlc播放器），它的宽高一直保持100%

基本思路就这样，剩下的就需要根据实际渲染情况微调就行了。

在win7的ie7下，整个页面会丢失高度。这就很莫名其妙，解决办法只有用js去计算了。
写在onresize事件里，每次页面变动让body的高度也跟着变。

var windowHeight = document.documentElement.clientHeight;
document.body.style.height = windowHeight + 'px';

还有很多问题是页面结构的原因。因为我也是接手别人写好的来改，而且这个项目是C#写的全栈项目，前后端没有分离，所以页面结构那些写的也不是很好。不过历经千辛万难，还是解决了！！！

关注