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>
bb10
Morten Johan Sørvig 2020-08-03 17:37:36 +02:00
parent ec82a44b40
commit 9704cbaf03
1 changed files with 8 additions and 1 deletions

View File

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