diff --git a/src/components/App.tsx b/src/components/App.tsx index e430026c8f..087c7cc049 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -887,6 +887,19 @@ class App extends React.Component { } private onResize = withBatchedUpdates(() => { + if (!this.deviceType.isMobile) { + const scrollBarWidth = 10; + const widthRatio = + (window.outerWidth - scrollBarWidth) / window.innerWidth; + const isBrowserZoomed = + // Device pixel ratio is 2 when zoom is 100% + window.devicePixelRatio !== 2 || widthRatio < 0.9 || widthRatio > 1; + if (isBrowserZoomed) { + this.setToastMessage(t("alerts.browserZoom")); + } else { + this.clearToast(); + } + } this.scene .getElementsIncludingDeleted() .forEach((element) => invalidateShapeForElement(element)); diff --git a/src/locales/en.json b/src/locales/en.json index f6d887cf55..4370ff2aee 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -181,7 +181,8 @@ "invalidSceneUrl": "Couldn't import scene from the supplied URL. It's either malformed, or doesn't contain valid Excalidraw JSON data.", "resetLibrary": "This will clear your library. Are you sure?", "removeItemsFromsLibrary": "Delete {{count}} item(s) from library?", - "invalidEncryptionKey": "Encryption key must be of 22 characters. Live collaboration is disabled." + "invalidEncryptionKey": "Encryption key must be of 22 characters. Live collaboration is disabled.", + "browserZoom": "Your browser's zoom level is not set to 100% which may cause the board to display incorrectly" }, "errors": { "unsupportedFileType": "Unsupported file type.",