diff options
| author | Morten Johan Sørvig <morten.sorvig@qt.io> | 2020-08-03 17:37:36 +0200 |
|---|---|---|
| committer | Morten Johan Sørvig <morten.sorvig@qt.io> | 2020-08-05 11:23:11 +0200 |
| commit | 9704cbaf03e99250040a166fbc32f33f6ba12658 (patch) | |
| tree | 909a05f77bdb3e639fcc61b9e1e8f220671bdf89 /src/plugins | |
| parent | ec82a44b40821d334d3fcecc1f18f57add590416 (diff) | |
wasm: set viewport size to device size on mobile
This is a good default, and also works around a couple
of current bugs in the Qt implementation. (Applications
can change the default values in the .html file as
needed.)
Change body height to 100% of the visual viewport (“100vh”)
to make the html body cover 100% of the viewport after
landscape -> portrait transitions on iOS.
Pick-to: 5.15
Task-number: QTBUG-85536
Task-number: QTBUG-85662
Change-Id: Iced1aee03940361c96f1fe3c104f3e6eb983cb90
Reviewed-by: Lorn Potter <lorn.potter@gmail.com>
Diffstat (limited to 'src/plugins')
| -rw-r--r-- | src/plugins/platforms/wasm/wasm_shell.html | 9 |
1 files changed, 8 insertions, 1 deletions
diff --git a/src/plugins/platforms/wasm/wasm_shell.html b/src/plugins/platforms/wasm/wasm_shell.html index d4bf632830..f5712d0418 100644 --- a/src/plugins/platforms/wasm/wasm_shell.html +++ b/src/plugins/platforms/wasm/wasm_shell.html @@ -3,9 +3,16 @@ <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + + <!--Set visual viewport size for mobile devices to the device size, + witch results in a scale of 1 and a 1:1 mapping between CSS pixels + and Qt device independent pixels. --> + <meta name="viewport" content="width=device-width, height=device-height, user-scalable=0"/> + <title>@APPNAME@</title> <style> - html, body { padding: 0; margin : 0; overflow:hidden; height: 100% } + /* Make the html body cover the entire (visual) viewport with no scroll bars. */ + html, body { padding: 0; margin: 0; overflow:hidden; height: 100vh } /* the canvas *must not* have any border or padding, or mouse coords will be wrong */ canvas { border: 0px none; background-color: white; height:100%; width:100%; } /* The contenteditable property is set to true for the canvas in order to support |