Hi Lars,
On 15 February 2013 11:57, Lars Knudsen <[email protected]> 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
_______________________________________________ webkit-qt mailing list [email protected] https://lists.webkit.org/mailman/listinfo/webkit-qt
