[webkit-qt] QML2 WebView and viewport meta tag (on Desktop)

Fri Feb 15 08:28:58 PST 2013

Hi Lars,

On 15 February 2013 11:57, Lars Knudsen <larsgk at gmail.com> wrote:

> Hi,
>
> I am having some trouble getting WebView to respect the viewport meta tag.
>
> I am including a test project (qt5) that should show the problem.
>
> In the index.html file, I have:
>
> <!DOCTYPE html>
>
> <html>
>
> <head>
>
>   <title>Demo App</title>
>
>   <meta name="viewport" content="width=1024, initial-scale=1, maximum-scale=1, user-scalable=no">
>
>
When setting an explicit maximum-scale=1 and/or initial-scale=1 in the
meta-tag, the width property actually translates into a "minimum viewport
width needed to display the content".
As a result when the screen is more than 1024 pixels wide the browser will
expand the viewport (rather than zoom) to fit the screen.
If the actual viewport size is smaller then the specified value, the QML
WebView lets you pan the page, since it is a QML Flickable.
This behaviour should become configurable in the future as we see the
Desktop / Touch Components evolve.
For the current WebView we decided to keep the consistency with Flickable,
thus the WebView is touch-oriented in behaviour.

>   <style type="text/css">
>
>  #block {
>
>      position: absolute;
>
>      left: 256px;
>
>      top: 256px;
>
>      width: 512px;
>
>      height: 512px;
>
>      background-color: red;
>
>  }
>
> </style>
>
> </head>
>
> <body>
>
> <h1>TEST</h1>
>
> <div id="block"></div>
>
> </body>
>
> </html>
>
>
>
> In the main.cpp, I have:
>
>     QtQuick2ApplicationViewer viewer;
>
>
>     viewer.setResizeMode(QQuickView::SizeRootObjectToView);
>
>
>     viewer.setMainQmlFile(QStringLiteral("qml/SimpleWebAppRunner/main.qml"));
>
>
>     // Select the app to load
>
>     QQmlProperty property((QObject*)(viewer.rootObject()), "appToLoad");
>
>     property.write("SimpleWebApp");
>
>
>     viewer.showExpanded();
>
>
> In the QML, I have:
>
> import QtQuick 2.0
>
> import QtWebKit 3.0
>
>
> Rectangle {
>
>     id: rootPanel
>
>     width: 800
>
>     height: 600
>
>
>     property string appBaseUrl: "../../apps/"
>
>     property string appToLoad:  ""
>
>
>     WebView {
>
>         id: webView
>
>         anchors.fill: parent
>
>         url: ""
>
>         onUrlChanged: console.log("Loading " + url)
>
>     }
>
>
>     onAppToLoadChanged: {
>
>         webView.url = appBaseUrl + appToLoad + "/index.html"
>
>     }
>
> }
>
>
>
> The whole web view seems to resize fine when resizing the QML window - but
> content does not scale like it should (like on a mobile device) -
> basically, scaling/zooming it <window width>/<viewport witdth=1024px>.
>
> Can anyone tell me what I am doing wrong? (maybe I am just blind from
> looking at the code too long - and the answer is obvious.. please tell :)).
>

For your use-case I suggest not to hardcode a content width in the viewport
meta-tag, rather use width=device-width (for reasons explained in [1]).

[1] http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites

/Andras
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-qt/attachments/20130215/cc7928a7/attachment.html>