如何在Electron Framework中更改窗口缩放级别 _Framework

本文概述

更改缩放等级
例子

有时, 作为开发人员, 要动态更改样式非常繁琐。这些繁琐的任务之一是使用JavaScript动态更改应用程序的字体大小, 因为通常这会使你的布局显示错误和其他问题。有时, 使用浏览器的缩放而不是更改样式可能会更好, 因此, 如果你记得可以说是针对你自己的应用程序的浏览器, 则可以利用Electron。你可以更改一个网页或所有网页(在此情况下为Windows)的文本, 图像和视频的大小。
更改缩放等级要在Electron中更改窗口的缩放级别, 你将需要使用Electron的webFrame模块, 该模块允许你自定义当前网页的呈现。仅在” 渲染器” 进程(视图)中执行此任务。使用以下方法通过电子访问模块：

const {webFrame} = require('electron')// Set the zoom factor to 200%webFrame.setZoomFactor(2);

该方法将缩放系数更改为指定的值。缩放系数是缩放百分比除以100, 因此500％= 5.0(最大缩放系数5)。你也可以使用getZoomFactor方法检索当前级别：

const {webFrame} = require('electron')// Get the zoom factor i.e: 2let currentZoomFactor = webFrame.getZoomFactor();

例子以下示例显示了如何使用范围输入更改浏览器的缩放系数：

< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < meta http-equiv="X-UA-Compatible" content="IE=edge"> < title> Electron Zoom State< /title> < meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1"> < /head> < body> < div id="app"> Current Zoom: < span style="font-weight: bold; " id="current-value"> < /span> < br /> < input type="range" id="zoom" min="1" value="http://www.srcmini.com/1" max="5" step="1"> < /div> < script> const {webFrame} = require('electron'); let zoomLevelSpan = document.getElementById("current-value"); function getFactorInPercent(value){return (parseInt(value) * 100) + "%"}document.getElementById("zoom").addEventListener("input", function(){var value = http://www.srcmini.com/this.value; // Update zoom factorwebFrame.setZoomFactor(parseInt(value)); // Update labelzoomLevelSpan.innerHTML = getFactorInPercent(value); }, false); document.addEventListener('DOMContentLoaded', function(){zoomLevelSpan.innerHTML = getFactorInPercent(webFrame.getZoomFactor()); }, false); < /script> < /body> < /html>

【如何在Electron Framework中更改窗口缩放级别】编码愉快！