2 files changed, 31 insertions, 6 deletions
diff --git a/src/plugins/platforms/wasm/qwasmintegration.cpp b/src/plugins/platforms/wasm/qwasmintegration.cpp
index 0d196ec099..15d396f479 100644
--- a/src/plugins/platforms/wasm/qwasmintegration.cpp
+++ b/src/plugins/platforms/wasm/qwasmintegration.cpp
@@ -87,6 +87,12 @@ static void qtUpdateDpi()
     QWasmIntegration::get()->updateDpi();
 }
 
+static void resizeAllScreens(emscripten::val event)
+{
+    Q_UNUSED(event);
+    QWasmIntegration::get()->resizeAllScreens();
+}
+
 EMSCRIPTEN_BINDINGS(qtQWasmIntegraton)
 {
     function("qtBrowserBeforeUnload", &browserBeforeUnload);
@@ -94,6 +100,7 @@ EMSCRIPTEN_BINDINGS(qtQWasmIntegraton)
     function("qtRemoveCanvasElement", &removeCanvasElement);
     function("qtResizeCanvasElement", &resizeCanvasElement);
     function("qtUpdateDpi", &qtUpdateDpi);
+    function("qtResizeAllScreens", &resizeAllScreens);
 }
 
 QWasmIntegration *QWasmIntegration::s_instance;
@@ -136,6 +143,13 @@ QWasmIntegration::QWasmIntegration()
         return 0;
     };
     emscripten_set_resize_callback(EMSCRIPTEN_EVENT_TARGET_WINDOW, nullptr, 1, onWindowResize);
+
+    // install visualViewport resize handler which picks up size and scale change on mobile.
+    emscripten::val visualViewport = emscripten::val::global("window")["visualViewport"];
+    if (!visualViewport.isUndefined()) {
+        visualViewport.call<void>("addEventListener", val("resize"),
+                          val::module_property("qtResizeAllScreens"));
+    }
 }
 
 QWasmIntegration::~QWasmIntegration()
diff --git a/src/plugins/platforms/wasm/qwasmscreen.cpp b/src/plugins/platforms/wasm/qwasmscreen.cpp
index 0f1fd886d0..be9d35cdef 100644
--- a/src/plugins/platforms/wasm/qwasmscreen.cpp
+++ b/src/plugins/platforms/wasm/qwasmscreen.cpp
@@ -127,12 +127,23 @@ QDpi QWasmScreen::logicalDpi() const
 
 qreal QWasmScreen::devicePixelRatio() const
 {
-    // FIXME: The effective device pixel ratio may be different from the
-    // HTML window dpr if the OpenGL driver/GPU allocates a less than
-    // full resolution surface. Use emscripten_webgl_get_drawing_buffer_size()
-    // and compute the dpr instead.
-    double htmlWindowDpr = emscripten::val::global("window")["devicePixelRatio"].as<double>();
-    return qreal(htmlWindowDpr);
+    // window.devicePixelRatio gives us the scale factor between CSS and device pixels.
+    // This property reflects hardware configuration, and also browser zoom on desktop.
+    //
+    // window.visualViewport.scale gives us the zoom factor on mobile. If the html page is
+    // configured with "<meta name="viewport" content="width=device-width">" then this scale
+    // factor will be 1. Omitting the viewport configuration typically results on a zoomed-out
+    // viewport, with a scale factor <1. User pinch-zoom will change the scale factor; an event
+    // handler is installed in the QWasmIntegration constructor. Changing zoom level on desktop
+    // does not appear to change visualViewport.scale.
+    //
+    // The effective devicePixelRatio is the product of these two scale factors, upper-bounded
+    // by window.devicePixelRatio in order to avoid e.g. allocating a 10x widget backing store.
+    double dpr = emscripten::val::global("window")["devicePixelRatio"].as<double>();
+    emscripten::val visualViewport = emscripten::val::global("window")["visualViewport"];
+    double scale = visualViewport.isUndefined() ? 1.0 : visualViewport["scale"].as<double>();
+    double effectiveDevicePixelRatio = std::min(dpr * scale, dpr);
+    return qreal(effectiveDevicePixelRatio);
 }
 
 QString QWasmScreen::name() const