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

2322次浏览

前言

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

内嵌网页显示很小问题。

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

解决方案

思路:

由于网页我是用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;
      }
  }

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

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

因此,代码如下:

  @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方式,在大屏幕下面显示很小,如下图enter image description here

解决方案

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

设置如下:

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

表格设置:

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

1920尺寸下,grid设置如下

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

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

Tags: css7k

相关文章: