Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

現象

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

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした