読者です 読者をやめる 読者になる 読者になる

【Electron】ウィンドウサイズ指定をコンテンツサイズに指定する方法

Electronの情報ってなかなか検索してもヒットしない。
日本語はもちろん、英語でもそんなに出てこないので辛いところです。

そんな私が直近でこまったのがウィンドウサイズ。


Electronを触ったことがある人ならわかると思うが、
new Browser()で指定したwidthとheightはフレーム込みの高さと幅になってしまいます。

var win = new Browser({
    width: 800px,
    height: 600px
  })

この場合フレーム込みで800*600になるため、
コンテンツの大きさ(HTML)は790px*598pxとか、
なんかそんな感じの大きさになります。
なのでcssで目一杯のwidth600pxに設定したりすると、
溢れてしまってスクロールバーが表示されてしまう事態に。

これだと、非常に作りにくいですし、フレームの大きさが1pxでもずれた場合
スクロールバーが表示されてしまって困る!


そこで、ElectronのuseContentSizeというオプションをtrueにすることで、
widthとheightで設定するサイズをコンテンツの大きさにすることができます。

var win = new Browser({
    width: 800px,
    height: 600px,
    useContentSize: true
  })

フレームの内側のコンテンツのサイズが800*600になるため、
cssで600pxを指定してもスクロールバーが表示されることはない!


それでもスクロールバーが表示される場合
useContentSizeで指定してるのにcssで目一杯していすると
スクルールバーがでてくんぞ!と言う場合はhtmlを疑いましょう。

開発者ウィンドウなどでコンテンツのサイズを観てみることをおすすめします。


おそらく、htmlかbodyにmarginが設定されていませんか?

html {
  margin: 0px;
}
body {
  margin: 0px;
}

これでコンテンツの要素はちゃんとウィンドウの要素にぴったり収まると思います。