Browser Window Responsive to Content

问题

I cannot really find any questions or information related to this elsewhere, so I thought I would post a question. Is there a way to make the BrowserWindow responsive to the content of index.html?

I know you can likely do this by manually changing the size of the BrowserWindow either with resizeTo or remote, but you would need to know the explicit size to set it to.

Is there a way to simply make the window responsive to the content, so that as the document's body grows, so too does the window?

回答1:

Maybe a simple approach to this could be: create a timer with setTimeout to check if document(document.body) size change; to this, use getComputedStyle method and a 'static function' variable storing the last size.

function getDocumentWidth(){//returns current document width
  return window.getComputedStyle(document.querySelector('body'), null).getPropertyValue("width");
}

function checkDocumentWidthChanged(callback){//verify by document width change, execute a callback function argument if it happened and resume the verification call
  let ns=getDocumentWidth()
  
  if(this.lastSize!=ns){
    this.lastSize=ns
    callback()
   }
   
   setTimeout(function(){checkDocumentWidthChanged(callback);}, 500);
   
}

checkDocumentWidthChanged.lastSize=getDocumentWidth();//function static var to store the last document size

checkDocumentWidthChanged(function(){//stat the loop
  console.log('New document size:'+checkDocumentWidthChanged.lastSize)
})

document.body.addEventListener('click',function(evt){//Set an event listener to test the proccess
  this.style.width=300+Math.floor(Math.random() * 100)+'px'
  console.log(this.style.width)
})

<body>
Click here to change the document body size or change the browser size.
</body>

来源：https://stackoverflow.com/questions/59691032/browser-window-responsive-to-content

标签

javascript

node.js

responsive-design

electron

responsive