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

Fri Feb 15 03:27:45 PST 2013

Hi Jocelyn,

I am getting half way there by removing the max and initial scale - but now
window resizes don't have control over the zoom/scale when the content
grows outside the window or double-click to zoom happens .  Previously, I
have combined the max/min/initial scale values on iPad to lock down all
kinds of accidental zooming/panning when making webapp demos/games.  But
maybe that's abusing the system ;)

- Lars

On Fri, Feb 15, 2013 at 12:18 PM, Jocelyn Turcotte <
jocelyn.turcotte at digia.com> wrote:

> 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
> > >
> > >
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-qt/attachments/20130215/b9064831/attachment-0001.html>