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

Fri Feb 15 03:10:49 PST 2013

Hello Lars,

This is pretty rusty stuff in my head, but doesn't maximum-scale=1 mean that you force a 1:1 pixel ratio of the page pixels with screen pixels?

To me it feels that using anything else than "width=device-width" with "maximum-scale=1" means that you do not want a view that fits the screen to width.

br,
Jocelyn

On Fri, Feb 15, 2013 at 11:57:37AM +0100, Lars Knudsen 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">
> 
>   <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 :)).
> 
> br
> Lars

> _______________________________________________
> webkit-qt mailing list
> webkit-qt at lists.webkit.org
> https://lists.webkit.org/mailman/listinfo/webkit-qt