srcmini本文概述
有时, 作为开发人员, 要动态更改样式非常繁琐。这些繁琐的任务之一是使用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: 2
let 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="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 = this.value;
// Update zoom factor
webFrame.setZoomFactor(parseInt(value));
// Update label
zoomLevelSpan.innerHTML = getFactorInPercent(value);
}, false);
document.addEventListener('DOMContentLoaded', function(){
zoomLevelSpan.innerHTML = getFactorInPercent(webFrame.getZoomFactor());
}, false);
</script>
</body>
</html>编码愉快！
评论前必须登录！
注册