12
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

EngraphiaAdvent Calendar 2016

Day 17

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

Posted at

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

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,
  });
12
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?