Render workbench inside visual viewport.

This commit is contained in:
Peng Lyu 2019-11-13 11:57:40 -08:00
parent 607df9880f
commit 5d0fd48922
3 changed files with 18 additions and 0 deletions

View file

@ -477,6 +477,11 @@ export function getClientArea(element: HTMLElement): Dimension {
return new Dimension(element.clientWidth, element.clientHeight);
}
// If visual view port exits, it should be used instead of window innerWidth / innerHeight, or document.body.clientWidth / document.body.clientHeight
if ((<any>window).visualViewport) {
return new Dimension((<any>window).visualViewport.width, (<any>window).visualViewport.height);
}
// Try innerWidth / innerHeight
if (window.innerWidth && window.innerHeight) {
return new Dimension(window.innerWidth, window.innerHeight);

View file

@ -16,6 +16,15 @@
<!-- Workbench Icon/Manifest/CSS -->
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="manifest" href="/manifest.json">
<style>
body.web {
touch-action: none;
}
.monaco-workbench.web {
touch-action: initial;
}
</style>
</head>
<body aria-label="">

View file

@ -92,6 +92,10 @@ class BrowserMain extends Disposable {
// Layout
this._register(addDisposableListener(window, EventType.RESIZE, () => workbench.layout()));
if ((<any>window).visualViewport) {
this._register(addDisposableListener((<any>window).visualViewport, EventType.RESIZE, () => workbench.layout()));
}
// Prevent the back/forward gestures in macOS
this._register(addDisposableListener(this.domElement, EventType.WHEEL, (e) => {
e.preventDefault();