大屏页面按需解决适配问题

草帽lufei
1,480 阅读4分钟

魔术师 - 巴兹尔·霍金斯

前言

最近在做一个大屏项目，里面包含整页静态背景图，静态效果图，动态图等内容填充，产品出个思路，UI出个静态设计稿，最终做出来的某大屏页效果大概如下，开发完第一版后，测试发现最大的问题是笔记本屏幕上的效果兼容问题，接下来就来分析一下这些问题都是什么情况，分别怎么解决的

页面结构

一个整页的静态背景图，一个头部标题图，中间六边形图，和下面会动的光圈(代码实现的旋转效果)，六边形左右是四个树形图

初版实现方式

  1. 页面的头部很简单，背景图和标题水平居中，两个条件区域使用绝对定位靠左靠右分别处理

  2. 根据UI提供的切图，先把六边形图和下面的一个静态背景图和动态光圈位置固定为水平居中，调整上下边距，实现整体在屏幕中的位置相对合适

  3. 基于六边形图的位置，把左右四个树形图定位上去

  4. 最后把文字基于图片位置定位写上去就行了

遇到的问题，解决方案

位置异常

刚开始做完以后在PC屏幕上看着正常，在浏览器 tab 页签下看的效果，由于是大屏项目，使用F11全屏看了一下效果后，发现六边形这部分固定设置的 top 值，在全屏模式下导致整体内容太靠上了

由于使用的绝对定位，设置了 top 值，不管是像素还是百分比数值调整，在不同大小的屏幕下兼容性都不太好。

把中间部分的内容全部放到 div 中，然后设置整个 div 水平垂直居中，这样整体效果不管是电脑屏幕，还是全屏模式看着都在中间位置了

内容重叠

笔记本上浏览右上角内容重叠了

由于中间部分图片都是静态宽高，图片和文字的内容都是根据相对定位进行的处理，这种就只能整体进行调整了，最好是整体缩放的形式，这样的效果在不同屏幕上还能保持一致

这里使用了 zoom 属性，由于用的 Vue2，在 mounted() 中设置一下

...
    if (window.innerWidth > 1700) {
      document.documentElement.style.zoom = "100%";
    } else if (window.innerWidth > 1400 && window.innerWidth <= 1700) {
      document.documentElement.style.zoom = "90%";
    } else if (window.innerWidth > 1250 && window.innerWidth <= 1400) {
      document.documentElement.style.zoom = "80%";
    } else {
      document.documentElement.style.zoom = "70%";
    }

    window.onresize = function () {
      if (window.innerWidth > 1700) {
        document.documentElement.style.zoom = "100%";
      } else if (window.innerWidth > 1400 && window.innerWidth <= 1700) {
        document.documentElement.style.zoom = "90%";
      } else if (window.innerWidth > 1250 && window.innerWidth <= 1400) {
        document.documentElement.style.zoom = "80%";
      } else {
        document.documentElement.style.zoom = "70%";
      }
    };

代码中进行了屏幕宽度判断，如果是大屏，则默认缩放比例为 100%，如果屏幕宽度小于多少，分别设置 90%, 80% 等对应的比例

由于我们用浏览器开发，如果用户手动改变浏览器窗口的大小，通过监听浏览器窗口变化，动态调整缩放比例，这样的效果就能满足大部分场景了

注意！

在实际测试中发现另外一个问题，在当前页面设置对应的比例后，在其他页面也会默认使用对应的比例，如果其他页面的内容没那么多，默认百分百比例就行的话，这样效果就不好了，为解决这种情况，在 beforeDestroy() 中把页面比例再调整成百分百，并且移除 resize 监听事件

  beforeDestroy() {
    function handleResize() {}
    window.removeEventListener("resize", handleResize);
    document.documentElement.style.zoom = "100%";
  },

注意！

另外一个注意点，zoom 属性 Firefox 浏览器不支持，项目中使用技术栈要考虑用户实际使用场景

zoom - CSS: Cascading Style Sheets | MDN (mozilla.org)

替代方案：

使用 transform: scale() ，所有浏览器都支持

显示不全

模拟一些真实数据后，也添加了缩放效果，笔记本中左侧数据依然显示不完整

产品设计问题，由于左上角的内容显示太多了，显示不全，把 元/头 和 母猪 这两部分可省略的字都去掉就行了，找产品，跟Ta说一下，把能省略的字去掉

写在最后

大屏项目的各种适配问题，不同的场景也有其他的实现方案, 适合自己项目业务就行，读者们都用过什么方案呢？

欢迎大家讨论交流，如果喜欢本文章或感觉文章有用，动动你那发财的小手点赞、收藏、关注再走呗 ^_^ 

微信公众号：草帽Lufei

avatar
文章
阅读
粉丝