[webkit-qt] QML2 WebView and viewport meta tag (on Desktop)
Lars Knudsen
larsgk at gmail.com
Fri Feb 15 06:00:09 PST 2013
Hi Jocelyn,
Also, setting the following will make the WebView completely ignore any
viewport settings:
QQuickWebViewExperimental::setFlickableViewportEnabled(false);
But if I don't disable the flickable viewport, then mouse and touch clicks
(with the mouse) behave strangly - AND double-click will zoom.
hmmm... I guess I am back to some hack needed by deriving from
QQuickWebView and setting the zoom factor directly based on the
relationship between the width in the meta tag and the window width.
This seemed to work when using QWebView - but I still havent found the
equivalent for QQuickWebView:
void MainWebView::resizeEvent ( QResizeEvent * event )
{
QWebView::resizeEvent(event);
QWebPage::ViewportAttributes va =
page()->viewportAttributesForSize(page()->viewportSize());
qreal zf = ((qreal)width())/va.size().width();
setZoomFactor(zf);
}
br
Lars
On Fri, Feb 15, 2013 at 12:27 PM, Lars Knudsen <larsgk at gmail.com> wrote:
> 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/a884a09d/attachment.html>
More information about the webkit-qt
mailing list