1.需求
公司是做的汽车检测整套软硬件设备。检测过程中的视频要和车管所进行对接,所以专门有个检测视频管理系统。现在浙江那边的车管所要求页面在125%
、150%
比例下,整个页面保持不变,仅仅是左侧菜单的文字跟随缩放比进行变化。
页面如下:
页面结构如下:
2. 解决思路
拿到页面的缩放比,在window.onresize
事件里监听页面缩放变化。获取页面能看到的所有dom,让它的宽、高、字体大小都按照 正常缩放比下的大小 / 当前页面缩放比例。
左侧区域宽度默认是
280px
。整个右侧区域是定位到右边的left: 280px;top: 0;bottom:0;right: 0
。所以这两个大的区域在缩放比改变后,我们仅需改变他们的宽度和距左边的距离即可。
视频区域也是定位在右侧区域里的
left: 0;right:0;top: 46px;bottom: 50px;
。在页面缩放比改变后,我们也是改变它的top
和bottom
值就好了,同时我们还要让里面的视频(vlc播放器),它的宽高一直保持100%
基本思路就这样,剩下的就需要根据实际渲染情况微调就行了。
3. 解决兼容性问题
3.1 body高度丢失
在win7的ie7下,整个页面会丢失高度。这就很莫名其妙,解决办法只有用js去计算了。
写在onresize
事件里,每次页面变动让body的高度也跟着变。
var windowHeight = document.documentElement.clientHeight;
document.body.style.height = windowHeight + 'px';
还有很多问题是页面结构的原因。因为我也是接手别人写好的来改,而且这个项目是C#写的全栈项目,前后端没有分离,所以页面结构那些写的也不是很好。不过历经千辛万难,还是解决了!!!