Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
10
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@takihiyoshi

electronのウィンドウサイズで指定した大きさとhtmlの大きさが合わない問題の解決

現象

例えば下記のように設定をし

win = new BrowserWindow({
  width: 800,
  height: 600,
});
body{
  width: 800px;
  height: 600px;
}

Electronで800 x 600の大きさを作った時にhtmlの方の大きさを800px x 600pxにすると画像のようにスクロールバーが出る

Electron_と_1__node.png

縦の方はこのタイトルバー分スクロールバー出てるっぽくて、横の方は多分縦のスクロールバーのせいとかでスクロールバー出てる。

解決法

electronのBrowserWindowのAPIページによると
ウィンドウサイズっていうのは枠の部分(タイトルバーとか枠線)も含めたsizeの指定だという事だった。
useContentSizeってオプションをtrueにすればウェブページ部分の大きさとしてwidthとheightオプションが解釈されるので、無事スクロールバーを表示しない状態にできた。

const createWindow = () => {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    useContentSize: true,
  });
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
10
Help us understand the problem. What are the problem?