Search code examples
htmliframewebviewelectronembed

electron webview simulate mobile phone screen

I'm making an electron desktop app trying to simulate google device toolbar, if I use iframe I get the desired behaviour with web page filling the entire screen, (no horizontal scrollbar), but then I can't embed websites that have same origin policy, on the other hand webview can display those websites, but I can't simulate devices height and width, for smaller devices only part of the web page is visible, and you have to scroll horizontally to see the page. Is there any way around this ?

Solution

  • A bit late but nevertheless here is a solution (if i understood right?):

    <webview src="https://instagram.com/direct/inbox" useragent="Mozilla/5.0 (Linux; Android 4.2.1; en-us; Nexus 5 Build/JOP40D) AppleWebKit/535.19 (KHTML, like Gecko; googleweblight) Chrome/38.0.1025.166 Mobile Safari/535.19"></webview>

    Or

    const webview = document.querySelector('webview')

webview.useragent = "Mozilla/5.0 (Linux; Android 4.2.1; en-us; Nexus 5 Build/JOP40D) AppleWebKit/535.19 (KHTML, like Gecko; googleweblight) Chrome/38.0.1025.166 Mobile Safari/535.19"
webview.src = 'https://instagram.com/direct/inbox'


    Extra Informations:

    Electron useragent
    List of User Agents

    make sure you use webviewTag

    webPreferences: {
  nodeIntegration: true,
  webviewTag: true
}