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

Fri Feb 15 03:18:34 PST 2013

Hi,

humm I just realized that what you want is a zoom out, so maximum-scale shouldn't prevent that, minimum-scale would.

The initial-scale=1 along with user-scalable=no on the other hand might be forcing it.
So maybe you could play along those lines.
It's also quite possible that you're hitting a bug in our code, I'd be interested to know if you find any bad behavior.

The spec is there if you are able to read this kind of language: http://dev.w3.org/csswg/css-device-adapt/
We should follow it as best as we can.

br,
Jocelyn

On Fri, Feb 15, 2013 at 12:12:55PM +0100, Lars Knudsen wrote:
> I just tried it on my android tablet, where it works.  It could be that the
> params are interpreted differently on chrome/mobile and qml2/webview.
> 
> I'll try without min/max scale now.
> 
> br
> Lars
> 
> 
> On Fri, Feb 15, 2013 at 12:10 PM, Jocelyn Turcotte <
> jocelyn.turcotte at digia.com> wrote:
> 
> > 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
> >
> >