可视化大屏本地普通屏幕样式调试大法（技巧）

背景

政府项目各种局办往往会有数字大屏，也就产生了许多 可视化/驾驶舱/大屏项目 的需求，要求一屏统览，展示诸多信息

然而个人开发者的开发设备往往没有那么大的分辨率/物理屏幕，本地开发和实际呈现效果难免会有差异

• 特指开发者工具设置分辨率后，页面会自动进行缩放，来让你看到整体效果（而选择100%大小时，又无法拖动屏幕范围去看不同位置的细节）

借助各种工具实现效果查看也都比较麻烦，体验很差

• 比如 ResponsivelyApp，可以一次性看到多个分辨率下的整体效果，但印象中会比较卡，而且不好调试
• 在代码里凭感觉进行盲调，缩放比例下大致差不多后，通过浏览器开发者工具的截图截取 100%缩放下的效果图，缩放拖动来看各个地方的细节是否到位，再做针对性的调整

思路原理及探索

模拟设备分辨率，100%显示，然后给 html 元素加 transform: translateX(-2000px);，具体值多少，参考模拟设备的宽度

• 设置 translateX、translateY 理论上可以调整很多位置

写成js，在控制台执行（可以快一点点）

document.getElementsByTagName("html")[0].style.transform