窗口內容有問題。在index.html的文件中,每樣東西看起來都大小合適。然而,當點擊& quot單擊此處& quot鏈接導航到register.html,內容放大。即使沒有CSS,問題仍然存在,并且在main.js文件中啟用了useContentSize:true設置。
這是兩個頁面的gif圖,所以你可以很容易地發現不同之處。
完全相同的分辨率,css被禁用,兩個頁面都用useContentSize:true設置,并且都在main.js中使用完全相同的設置
useContentSize:true,
width: 700,
height: 700,
minWidth: 700,
minHeight: 700,
frame: false,
那么,我該如何解決這個問題呢?
index.html
<!DOCTYPE html>
<html>
<head>
<title>stuff</title>
<link rel="stylesheet" href="src/styles/styles.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="src/js/appFunctions.js"></script>
</head>
<body>
<div class="mainApp">
<div class="topBar">
<div class="titleBar">
<img class="topimgicon" src="src/icons/Icon.png" alt="" />
<div class="title">home</div>
</div>
<div class="titleBarBtns">
<button id="minimizeBtn" class="topBtn minimizeBtn" title="Minimize"></button>
<button id="maxResBtn" class="topBtn maximizeBtn" title="Maximize"></button>
<button id="closeBtn" class="topBtn closeBtn" title="Close"></button>
</div>
</div>
<div class="contentArea">
<div class="wrapper">
<form class="loginForm" method="post">
<!-- <div class="loginForm"></div> -->
<div class="imgcontainer">
<img src="../img/logo2.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<div class="field email">
<div class="input-area">
<input id="username" type="text" placeholder="Username" class="input" >
<span class="error-message"></span>
</div>
</div>
<div class="field email">
<div class="input-area">
<input id="password" type="password" placeholder="Password" class="input" >
</div>
</div>
<input class="button" id="login" type="submit" value="Login">
</div>
</form>
<div class="register_acct">
<p>Don't have an account yet?</p>
<a href="src/directories/register.html">Click here</a>
</div>
</div>
</div>
</div>
</body>
</html>
register.html
<!DOCTYPE html>
<html>
<head>
<title>register</title>
<link rel="stylesheet" href="../styles/styles.css" />
<script src="../js/appFunctions.js"></script>
<script src="../js/register.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div class="mainApp">
<div class="topBar">
<div class="titleBar">
<img class="topimgicon" src="../icons/Icon.png" alt="" />
<div class="title"></div>
</div>
<div class="titleBarBtns">
<button id="minimizeBtn" class="topBtn minimizeBtn" title="Minimize"></button>
<button id="maxResBtn" class="topBtn maximizeBtn" title="Maximize"></button>
<button id="closeBtn" class="topBtn closeBtn" title="Close"></button>
</div>
</div>
<div class="contentArea">
<div class="wrapper">
<form class="loginForm" method="post">
<!-- <div class="loginForm"></div> -->
<div class="imgcontainer">
<img src="../img/logo2.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<div class="field email">
<label> Create your new account</label>
<div class="field email">
<div class="input-area">
<input id="username" type="text" placeholder="Create Username" class="registerf">
</div>
</div>
<div class="field email">
<div class="input-area">
<input id="password" type="password" placeholder="Password" class="registerf">
</div>
</div>
<div class="input-area">
<input id="email" type="email" placeholder="Email" class="registerf">
</div>
</div>
<div class="field email">
<div class="input-area">
<input id="site" type="text" placeholder="Site Code" class="registerf" maxlength="5">
</div>
</div>
</div>
<div class="register_buttons_group">
<input class="button" id="goBackBtn" type="button" value="Go Back">
<input class="button" id="register" type="submit" value="Register">
</div>
</form>
</div>
</div>
</body>
</html>
main.js中的注冊函數:
function registerWindow() {
winregister = new BrowserWindow({
useContentSize:true,
width: 700,
height: 700,
minWidth: 700,
minHeight: 700,
frame: false,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
devTools: true,
preload: path.join(__dirname, 'src/js/register.js')
}
});
winregister.loadFile('src/directories/register.html');
}
版本:
"name": "login",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^19.1.9"
},
"dependencies": {
"exceljs": "^4.3.0",
"express": "^4.18.1",
"express-openid-connect": "^2.8.0",
"express-session": "^1.17.3",
"gridstack": "^5.1.1",
"gulp": "^4.0.2",
"gulp-less": "^5.0.0",
"gulp-sass": "^5.1.0",
"jquery": "^3.6.0",
"mysql": "^2.18.1",
"update-electron-app": "^2.0.1",
"xlsx": "^0.18.5"
},
上一篇vue 視頻拼接圖片
下一篇vue 視圖更新原理