electron webview 模拟手机屏幕答案

【问题标题】：electron webview simulate mobile phone screenelectron webview 模拟手机屏幕
【发布时间】：2020-03-21 05:28:25
【问题描述】：

我正在制作一个电子桌面应用程序，试图模拟谷歌设备工具栏，如果我使用 iframe，我会得到所需的行为，网页填满整个屏幕，（没有水平滚动条），但是我无法嵌入网站具有相同的来源策略，另一方面 webview 可以显示这些网站，但我无法模拟设备的高度和宽度，对于较小的设备，只有部分网页可见，您必须水平滚动才能看到页面。有没有办法解决这个问题？

【问题讨论】：

标签： html iframe webview electron embed

【解决方案1】：

有点晚了，但这里有一个解决方案（如果我理解正确？）：

<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>

或者

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'

额外信息：

Electron useragent
List of User Agents

确保你使用webviewTag

webPreferences: {
  nodeIntegration: true,
  webviewTag: true
}

【讨论】：

是的，您正确理解了我的问题，我完全没有注意到您需要随请求发送您想要获取信息的设备类型这一事实。我会接受您的回答，以便将来对其他人有所帮助