内容简介：超大7k高清显示器显示网页解决方案
前言
最近事情很多，家里的事情，公司的事情一大堆。前段时间，给公司做了一个简单的数据大屏，近期又来了数据大屏项目。此次项目连屏幕尺寸和比例都不知道。一开始制作是按照16：9,也就是1920 × 1080。后面公司采购大屏是1920 × 4，1080 × 3，也就是横着4块大屏，竖着3块，总共12块。二且屏幕是高清播放，分别率7680×3240。高清7k屏幕。这个和我之前制作的比例有出入。无奈多次调整。记录一下高清屏出现的2个问题吧。期待朋友有更好的解决方案，欢迎交流！
内嵌网页显示很小问题。
此次数据大屏有互动交互，其中一个就是展示我们之前做的CRIC数据营销系统。因为数据营销系统pc网页版之前制作使用的单位是px，虽然屏幕自适应，但是在高清屏幕中显示效果很差，字体，图标很小！部分效果如下图： 
解决方案
思路：
由于网页我是用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方式，在大屏幕下面显示很小，如下图 
解决方案
用js判断屏幕大小，然后对字体等设置进行缩放处理。
设置如下：
默认1920，字体是12px，判断屏幕是3840则设置字体是24px，以此类推！
表格设置：
原来的grid的间距也以此类推的设置：
1920尺寸下，grid设置如下
grid: {
x: 35,
y: 20,
x2: 10,
y2: 25
},
把这些间距都设置成动态参数式的，根据屏幕大小，进行大小缩放。
以上所述就是小编给大家介绍的《超大7k高清显示器显示网页解决方案》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- ios 超大图显示：CATiledLayer的使用，关于tileSize的用法
- 快手超大规模集群调度优化实践
- MySQL自增id超大问题查询
- 超大屏数据可视化总结-智慧城市
- 超大文件上传之计算文件MD5值
- PHP超低内存遍历目录文件和读取超大文件
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
