As a developer sometimes, is pretty tedious to change styles dinamically. One of those tedious task, is to change the font-size of the application with JavaScript dinamically, as usually it will make your layout to display wrong and other problems. Sometimes, using the zoom of the browser instead of changing the styles may work better, so you can take advantage of Electron if you remember that it is so to speak a browser for your own application. You can change the size of text, images, and videos for one webpage or for all webpages (windows in this case).
Changing the Zoom Level
To change the zoom level of a window in Electron, you will need to use the webFrame module of Electron that allows you to customize the rendering of the current web page. This task is executed only in the Renderer process (the view). Access the module from electron using:
const {webFrame} = require('electron')
// Set the zoom factor to 200%
webFrame.setZoomFactor(2);The method changes the zoom factor to the specified. Zoom factor is zoom percent divided by 100, so 500% = 5.0 (max zoom factor 5). You can retrieve the current level using the getZoomFactor method too:
const {webFrame} = require('electron')
// Get the zoom factor i.e: 2
let currentZoomFactor = webFrame.getZoomFactor();Example
The following example shows how to change the zoom factor of the browser using a range input:
<!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>Happy coding !
