How to make Electron WebView fill specified size?

2019-06-20 18:32发布

问题:

I've tried adding an Electron WebView to a basic app and set minwidth and minheight on it as shown below. When it loads though it always ends up as 784px X 150px

<webview id="webpage" src="https://www.duckduckgo.com/" autosize="on" minwidth="800px" minheight="1200px"></webview>

回答1:

This is an issue other people have reported too. Here in atom discussion webview autosize.

It seems that 'autosize' doesn't say the last word about the resulting window size; css parameters may interfere and change the result.

There are some css workarounds proposed for this issue that may help:

Set html and body width to 100%:

html, body {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
}

Set viewport relative units in webview css:

webview {
  display: block;   /* iframes are inline by default */
  border: none;     /* Reset default border */
  height: 80vh;     /* Viewport-relative units */
  width: 95vw;
}


回答2:

Try this:

<div style="width:100%; height:100%">
    <webview src="https://www.google.com/" autosize="on" style="min-width:900px; min-height:1200px"></webview>
</div>