超大7k高清显示器显示网页解决方案

前言

最近事情很多，家里的事情，公司的事情一大堆。前段时间，给公司做了一个简单的数据大屏，近期又来了数据大屏项目。此次项目连屏幕尺寸和比例都不知道。一开始制作是按照16：9,也就是1920 × 1080。后面公司采购大屏是1920 × 4，1080 × 3，也就是横着4块大屏，竖着3块，总共12块。二且屏幕是高清播放，分别率7680×3240。高清7k屏幕。这个和我之前制作的比例有出入。无奈多次调整。记录一下高清屏出现的2个问题吧。期待朋友有更好的解决方案，欢迎交流！

内嵌网页显示很小问题。

此次数据大屏有互动交互，其中一个就是展示我们之前做的CRIC数据营销系统。因为数据营销系统pc网页版之前制作使用的单位是px，虽然屏幕自适应，但是在高清屏幕中显示效果很差，字体，图标很小！部分效果如下图：

解决方案

思路：

由于网页我是用iframe,嵌套进来的。那么我可以根据屏幕大小，来对网页进行一个相应的缩放。

css代码如下：

css 复制代码

  @media screen and (min-width: 3840px) { 
      .adeptScreen{
          -ms-transform: scale(2);-webkit-transform: scale(2);transform: scale(2);
          -webkit-transform-origin:0 0;transform-origin:0 0;
      }
  }

我针对3840，7680等尺寸，分别写了不同的屏幕适配。但是效果不是我想想的那样，放大是在原有屏幕的基础上放大的。

因此，我对iframe先缩小在放大，也就是，假如放大2倍，那么iframe就是原来的50%，放大3倍，iframe就是原来的三分之一。

因此，代码如下：

css 复制代码

  @media screen and (min-width: 3840px) { 
      .adeptScreen{
          -ms-transform: scale(2);-webkit-transform: scale(2);transform: scale(2);
          -webkit-transform-origin:0 0;transform-origin:0 0;
      }
       iframe{width:50%;height:50%;} /**  iframe原来已经设置了定位 **/
  }

这种方法期待验证，等待更好的方式!

地图表格等文字变得很小

原来是1920尺寸下的字体，由于用的是百度的echart，文字等是用px方式，在大屏幕下面显示很小，如下图

解决方案

用js判断屏幕大小，然后对字体等设置进行缩放处理。

设置如下：

默认1920，字体是12px，判断屏幕是3840则设置字体是24px，以此类推！

表格设置：

原来的grid的间距也以此类推的设置：

1920尺寸下，grid设置如下

less 复制代码

grid: {
    x: 35,
    y: 20,
    x2: 10,
    y2: 25
},

把这些间距都设置成动态参数式的，根据屏幕大小，进行大小缩放。