Develop Reference

In a PWA the virtual keyboard overlaps html elements, in a mobile chrome browser it doesn't

I've build my web app into a progressive web app (PWA).
Everything works great except when i click on a input for typing something in the pwa the keyboard hides elements which are position fixed to the bottom.
on the website viewed with chrome on android this is not a problem.
i've tried to debug this with the devtools connected to my phone, but there the keyboard doesn't appear.
Does anyone have an idee what i can do to fix this?
One of the elements with this problem:
.scanner .text-input-btn {
position: fixed!important;
bottom: 18vh;
left: 50vw;
margin-left: -28px;
}
I think it may be a bug in the google chrome's PWA launcher, i think the webview is still 100% of the device height i/o the 100% minus the height of the virtual android keyboard.
In the browser: (correct)
In a PWA: (wrong)

Take a look at your manifest.json and make sure display property is standalone, we had a couple of problems with display set to fullscreen, samsung keyboard takes the focus out of the PWA

you ned to set meta tag for your pwa app
if you use javascript framework like ( vuejs / reactjs / angularjs ) can use below meta code
{name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'},
{viewport: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no',mobileAppIOS: true},
{name: "mobile-web-app-capable", content: "yes"},
{name: "full-screen", content: "yes"},
{name: "browsermode", content: "application"},
{name: "screen-orientation", content: "portrait"},
if you want can set below code to your html page
<meta name='viewport' content= 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>
<meta viewport= 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' mobileAppIOS= true>
<meta name="mobile-web-app-capable" content= "yes">
<meta name="full-screen" content="yes">
<meta name="browsermode" content="application">
<meta name="screen-orientation" content="portrait">

Flash Animate - Webview Scale/Zoomfactor

so i have a question about open websites with the webView.loadURL function. On ios the scale factor seems to be perfect, and the page fits perfect to the Rectangle I create to visualize the page. But if i create a build for andorid, the website opens with the maximum of zoom, so I have to tap into the screen and zoom out to see the complete page.
Has someone an idea how to determine the automatic zoom on android? It would be great if I load the page, and it would be showed completely, without a zoomfactor like on ios.
To change the size of the rectangle wouldn't be a solution, because I have a fix size, and I need to keep it.
Best regards and thanks a lot!

Hopefully it is not too late and hopefully this time it will be useful.
Try adding an element into the dom like this:
var webView:StageWebView = new StageWebView();
webView.viewPort = new Rectangle( 0, 0, this.stage.stageWidth, this .stage.stageHeight);
webView.stage = this.stage;
var htmlString:String = "<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>";
webView.loadString( htmlString );

If you can access the source code of the website, try to write this: <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Overriding Viewport metadata property "user-scalable=no" in webview to allow zooming

I have a webpage which have a "viewport" tag with the following value:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I want to allow zooming on that page which is displayed in a WebView
so I inject some javascript on onPageFinished() as follow:
webView.loadUrl("javascript:document.getElementsByName('viewport')[0].setAttribute('content', 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes');");
but it doesn't work.
* I also tried rearranging properties like this
webView.loadUrl("javascript:document.getElementsByName('viewport')[0].setAttribute('content', 'user-scalable=yes, width=device-width, minimum-scale=1.0, maximum-scale=1.0');");
or removing the property like this
webView.loadUrl("javascript:document.getElementsByName('viewport')[0].setAttribute('content', 'width=device-width, minimum-scale=1.0, maximum-scale=1.0');");
with the same result.
after some trials I found out that I can override maximum-scale only if there was no "user-scalable=no" defined at all in the page.
for example if the Viewport metadata was like this:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
everything would work just fine.
I checked the value of the "viewport" tag after injection using javascript:alert(...), and it was modified by the injection, yet with no actual result.
I tried setting UseWideViewPort with true or false, and it didn't help neither:
webView.getSettings().setUseWideViewPort(true);
//or
webView.getSettings().setUseWideViewPort(true);
the samething with setLoadWithOverviewMode()
zooming doesn't work even programmatically using zoomIn() or zoomOut().
I've tested using android 2.3 and android 4.4.2 with the same results.
note: I did read almost all the questions on this site related to zooming and viewport, but nothing was useful in my case.
my webView settings are defined as follow:
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setSupportZoom(true);
webView.getSettings().setBuiltInZoomControls(true);
So is there any other ways to allow zooming and override the metadata?
a solution which is compatible with API 10 would be very appreciated.

Very nicely asked. This code worked for me, despite being essentially what you stated didn't work, can't say why we are getting different results. You have to change the document's properties since the WebView respects those.
public void onPageFinished(WebView view, String url)
{
webView.loadUrl("javascript:document.getElementsByName('viewport')[0].setAttribute('content', 'initial-scale=1.0,maximum-scale=10.0');");
}

Intel XDK disable rotation

I made a simple application in Intel XDK.
When I was testing the application I noticed that they enabled the accelerometer.
For this application it's needed to have only 1 position.
How can I disable the accelerometer?
Thanks in advance.

Its not accelerometer that is causing, its the device orientation that needs to fixed.
Call this API to fix the orientation: intel.xdk.device.setRotateOrientation(ORIENTATION); after intel.xdk.device.ready has fired.
Full documentation is here
Portrait: intel.xdk.device.setRotateOrientation("portrait");
Landscape: intel.xdk.device.setRotateOrientation("landscape");
Both: intel.xdk.device.setRotateOrientation("any");
Below is sample code:
<!DOCTYPE html>
<html>
<head>
<title>XDK</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" />
<script src="intelxdk.js"></script>
<script>
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
function onDeviceReady(){
// set orientation
intel.xdk.device.setRotateOrientation('landscape');
// intel.xdk.device.setRotateOrientation('portrait');
// intel.xdk.device.setRotateOrientation('any');
intel.xdk.device.hideSplashScreen();
}
</script>
<style>
body {font-family:arial;background-color:white}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>Locked to Landscape</p>
</body>
</html>

That is possible do it the way next:
Go the project properties.
Build Settings
Orientation
You select, landscape or portrait.
If you emule the project, you see the changes.

use the setRotateOrientation-Method:
To lock the device in portrait mode, use:
intel.xdk.device.setRotateOrientation("portrait");
Works on Android as well as iOS.
See: Documentation

Easier is to go to Build Settings -> Your Platform -> Orientation. That very fast and simple.

Android viewport setting "user-scalable=no" breaks width / zoom level of viewport

I am working on a web app which has a width of 640px.
In the document head I set
<meta name="viewport" content = "width=640, user-scalable=no" />
so the content is nicely displayed and stretched horizontally.
This works perfectly on iOS but in Android the browser opens the website zoomed in so the user has to double click to zoom out and the entire page.
When I change the viewport setting to leave out the user-scalable tag like this:
<meta name="viewport" content="width=640" />
the Android browser adjusts nicely to the 640px - so it works.
The problem however now is, that users can zoom in and out on Android and iOS since the user-scalable tag is not set.
How can I forbid the scaling and at the same time set the viewport width to 640px on Android?

Trying rendering the viewport meta tag like so:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Setting scale settings will set user restrictions on how far they can zoom, and so if you set the initial and maximum to the same amount, this should fix the problem.
UPDATE: I was able to fix my bug for android devices all together by setting the below:
<meta name="viewport" content="width=640px, initial-scale=.5, maximum-scale=.5" />
I also noticed that some content, such as p tags were not flowing across the screen, so the hack for that would be to add the background-image property with empty string to any content that is stuck and is not going across the layout view. Hope this helps this time for you.

I wanted mobile to always show a website 640px wide because of a design that would break otherwise. (a design I did not make..) Thereby I wanted to disable zooming for mobile users. What worked for me me is the following:
- UPDATED 2013-10-31
First of all, there is no way you can do this without Javascript. You will have to check the user agent string. Therefore I created a mobile-viewport.js and included the script just before the closing tag:
function writeViewPort() {
var ua = navigator.userAgent;
var viewportChanged = false;
var scale = 0;
if (ua.indexOf("Android") >= 0 && ua.indexOf("AppleWebKit") >= 0) {
var webkitVersion = parseFloat(ua.slice(ua.indexOf("AppleWebKit") + 12));
// targets android browser, not chrome browser (http://jimbergman.net/webkit-version-in-android-version/)
if (webkitVersion < 535) {
viewportChanged = true;
scale = getScaleWithScreenwidth();
document.write('<meta name="viewport" content="width=640, initial-scale=' + scale + ', minimum-scale=' + scale + ', maximum-scale=' + scale + '" />');
}
}
if (ua.indexOf("Firefox") >= 0) {
viewportChanged = true;
scale = (getScaleWithScreenwidth() / 2);
document.write('<meta name="viewport" content="width=640, user-scalable=false, initial-scale=' + scale + '" />');
}
if (!viewportChanged) {
document.write('<meta name="viewport" content="width=640, user-scalable=false" />');
}
if (ua.indexOf("IEMobile") >= 0) {
document.write('<meta name="MobileOptimized" content="640" />');
}
document.write('<meta name="HandheldFriendly" content="true"/>');
}
function getScaleWithScreenwidth() {
var viewportWidth = 640;
var screenWidth = window.innerWidth;
return (screenWidth / viewportWidth);
}
writeViewPort();
The script checks if the visitor has an android (not chrome) or firefox browser. The android browser does not support the combination of width=640 and user-scalable=false, and the firefox browser does have a double screen width for some strange reason. If the visitor has a windows phone IE browser MobileOptimized is set.

I had the same situation, if you want the content to always fit the screen width without allowing the user to zoom in/out, use the following meta tags (this will work no matter what width you give)
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />