前端做大屏显示，缩放比，分辨率怎样适配？

我们在做大屏的时候经常在开发环境开发的时候显示很完美，但是到了客户电脑就花样百出，出去浏览器对CSS3和js语言新特性的兼容问题，其实大多是因为网页的缩放比，或者用户的高分屏的一些设置问题，如图

通常这样设置没有问题，但是有些笔记本高分屏，默认缩放比就是125%.这样可能原来1920的大屏显示在1536宽度的屏幕上肯定会出现问题。

首先我们我们可以通过js获取当前的显示器的尺寸

width、height、就是当前的显示器在当前分辨率下的尺寸，availWidth、availHeight是可使用尺寸（一般是去除工具栏的尺寸）

接着

window.outerHeight;//浏览器外框宽
window.outerWidth;//浏览器外框高
window.innerWidth;//浏览器内框宽（通常是和外框宽一致，开启F12时候，去除开发者工具占的空间）
window.innerHeight;//浏览器内框高（去除标签栏，地址栏，收藏夹栏等等）

动态获取浏览器缩放

function detectZoom (){ var ratio = 0,screen = window.screen,ua = navigator.userAgent.toLowerCase();if (window.devicePixelRatio !== undefined) {ratio = window.devicePixelRatio;}else if (~ua.indexOf('msie')) {  if (screen.deviceXDPI && screen.logicalXDPI) {ratio = screen.deviceXDPI / screen.logicalXDPI;}}else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {ratio = window.outerWidth / window.innerWidth;}if (ratio){ratio = Math.round(ratio * 100);}return ratio;
};

到此我们拿到的是全屏时候的一个真实外框与内框的比，这个比的倒数n就是要设置容器的transform:scale(n);

前端做大屏显示，缩放比，分辨率怎样适配？相关推荐

【前端大屏实战1】Vue+Echarts -- 大屏简介初体验 =＞大屏自适应缩放解决方案 =＞使用transform:scale =＞组件化抽离ScaleBox=＞【两分钟实现大屏宽高等比例】
如果累了就冬眠吧,如果睡不着,就接纳暂时的失眠,不强迫自己入睡. 目录一.大屏简介 1.数据可视化 2.大屏用途 3.大屏效果展示二.大屏需求分类 1.固定尺寸的"真实"大屏 ...
VMVare中CentOS图形化界面大屏显示的方法（调节屏幕分辨率）
1.问题阐述在虚拟机中安装CentOS系统,进入图形化界面后发现显示的界面很小,看起来很不方便,因此下面通过调节屏幕的分辨率来将图形化界面大屏显示. 2.操作步骤通常来说,CentOS系统内的操作 ...
（转）超全面设计指南：如何做大屏数据可视化设计？
数据可视化是一门庞大系统的科学,本文所有讨论仅针对大屏数据可视化这一特定领域.管中窥豹,如有遗漏或不足之处欢迎大家讨论交流. 文章结构及思维导图: 一.基础概念 1. 什么是数据可视化把相对复杂.抽 ...
思迈特软件Smartbi：数据大屏显示实时数据解决方案
大数据时代 ,数据是有价值的"黄金 ",但是数据是不会告诉你 ,那里存在价值 ,我们可以通过大屏显示来直观的了解数据中隐含的价值 . 大屏显示是什么?顾名 ...
BI报表之电网大屏显示制作
原文链接:http://c.raqsoft.com.cn/article/1536634816208?r=alice 2018 年已经过半,各省又开始比考试成绩了,考试科目就叫 GDP,排在前面的自然 ...
零代码、不花钱就能做大屏，这个报表工具帮了大忙
最近老板又在提做可视化大屏的事情了,但大屏又不是想做就能做的,我们公司一没钱,二没技术,根本搞不起来大屏项目.每次老板说大屏,我们就含糊其辞糊弄过去. 但最近,我们被逼上绝路了,谁能想到,连菜市场都上 ...
html大屏可视化边框怎么弄的,做大屏可视化，你需要知道这几点
看别人家的大屏做得直观又好看,自己也想做,那么自己做大屏可视化难吗?其实还真不算难,只要有BI数据可视化工具,你就能自由发挥,制作有个性又直观的大屏可视化报表.但简单归简单,有些该注意的事项还是得注意 ...
迪威视讯获中国大屏显示领域顶级大奖
2016年1月13日,迪威视讯宣布,在由中国投影网.数字标牌网.音响网联合主办的"2015视听行业高峰论坛"暨第十届中国大屏幕投影行业年度评选活动中,迪威视讯荣获"201 ...
智慧工地指挥室大屏显示系统应该如何建设？
大屏显示系统是一个把复杂.抽象的大型数据,通过构建图形.提炼重点指标等易于理解的形式,加以视觉效果展示出的方式叫做数据可视化,用在数据统计.数据备份中心管理这些工作上.一方面利用酷炫的效果让人眼前一亮 ...

前端做大屏显示，缩放比，分辨率怎样适配？

前端做大屏显示，缩放比，分辨率怎样适配？相关推荐

最新文章

热门文章