PhoneGap : 1.5.0, Android : 2.3.4
I added a viewport tag into my HTML like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no;">
but it's not working. I have a window with width = 320px, but it should be 480px.
When I Googled this problem, I found this:
Add these 2 line to onCreate():
this.appView.getSettings().setUseWideViewPort(true);
this.appView.getSettings().setLoadWithOverviewMode(true);
But after I inserted these two lines I couldn't launch into WebView anymore! Instead, I got the following exception:
ActivityThread.performLaunchActivity(ActivityThread$ActivityRecord, Intent) line: 2496
Here is the exception screenshot
Can anyone help, please?
try this code:
Activity file:
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN |
WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
super.loadUrl("file:///android_asset/www/index.html");
}
html file
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,target-densitydpi=250,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
with android AndroidManifest.xml android:screenOrientation="landscape"
The horizontal display is fullscreen
just tested, preference is not complete solutioin, do following:
config.xml: <preference name="EnableViewportScale" value="true" />
main activity, enable viewport in settings AFTER loadurl:
super.loadUrl(Config.getStartUrl(),1);
WebSettings settings = appView.getSettings();
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);
I've answered my fix here: https://stackoverflow.com/a/28755743/4612666
Basically change the AndroidManifest.xml min/target version to this:
<uses-sdk android:minSdkVersion="7" />
Can play with the version, not really sure.
Related
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');");
}
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.
I have tried the following code to fit the webpage based on the device screen size.
WebView mWebView=(WebView)findViewById(R.id.webView1);
mWebView.loadUrl("file:///android_asset/test/index.html");
mWebView.setInitialScale(1);
mWebView.getSettings().setLoadWithOverviewMode(false);
mWebView.getSettings().setUseWideViewPort(true);
mWebView.getSettings().setBuiltInZoomControls(true);
mWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
mWebView.setScrollbarFadingEnabled(false);
In this Zoomcontrols is working fine.
But webpage is not fixed to the device screen size.
Can anyone give me suggestions...?
Try adding the following meta tag to your HTML file
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
On jelly beans android device (also ICS I believe), youtube videos in in an frame inside an android WebView stopped working in our apps many weeks ago: no video (black screen) but can hear sounds and see video controls.
I finally found one clue about what's preventing them from working.
Seems like the following needs to be set in the manifest for the video to work:
android:targetSdkVersion="8"
android:hardwareAccelerated="true"
supports-screens android:anyDensity="false"
Also on a side note, the video works fine after we click on the full screen youtube button (but I do not want to use fullscreen).
1) and 2) are not an issue for us, we can set those in the manifest (but i wonder why hardware acceleration is required).
But 3) we can't (for different reasons).
Does anyone know why anyDensity sets to false breaks videos and if there is any workaround?
some info about the apk to reproduce the issue:
apk was built with android 3.0
key extract of the manifest:
<uses-sdk android:minSdkVersion="1" android:targetSdkVersion="8"/>
<!-- android:hardwareAccelerated="true" -->
<application android:icon="#drawable/icon" android:label="#string/app_name" android:hardwareAccelerated="true">
<activity android:name=".TestHTML5WebView"
android:label="#string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
<supports-screens android:anyDensity="false"/>
...
html code used for the youtube video:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi"/>
<script type="text/javascript" charset="utf-8">
window.onerror = function(errorMsg) {
try {
alert(errorMsg);
}
catch(err) {
alert('An expected error occurred. please try again later!');
}
}
</script>
<style type="text/css" media="screen">
body {
background: #000;
margin: 0;
padding: 0;
}
.video1 {
width: 90%;
height: 90%;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="video1">
<iframe width="560" height="315" src="http://www.youtube.com/embed/hH9Kx06oO_0" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
to reproduce the issue, you can use the source code from http://code.google.com/p/html5webview/source/checkout (just make sure you update the manifest.xml with the values indicated at the top of this post, targetSdkVersion, hardwareAccelerated, android:anyDensity).
thanks.
Laurent
For embedded video, the app needs surfacetexture class. This requrires android:hardwareAccelerated="true" to be set to true.
according to http://developer.android.com/guide/topics/manifest/supports-screens-element.html, android:anyDensity="false" should not be set to false.
fullscreen video uses surfaceview, surfaceview has no requirement on hardware acceleration.
Youtube Recently released player for android :
https://developers.google.com/youtube/android/player/
I need to be able to turn pinch-zoom on and off using the viewport setting on my Android PhoneGap app.
But I'm unable to get viewport to affect pinch-zooming at all when using PhoneGap. I cannot turn on Pinch-zoom in PhoneGap, but when browsing with the Android Native browser to the webpage everything works fine.
I have spent a lot of time searching for a solution, without any result.
I created a very simple index.html for testing, having viewport setting like:
<meta name="viewport" content="user-scalable=yes" />
As some has suggested I have also tried the viewport:
<meta name="viewport" content="user-scalable=1" />
Other solutions for Android PhoneGap would be to enable Android Native Pinch-Zoom which have been suggested here:
zoom in phonegap for android
But this will not work for me, since I need to be able to control the pinch-zoom from javascript. I.e. I need to be able to use javascript to change the viewport setting, to control when pinch-zoom is available (user-scalable=yes / user-scalable=no)
Please observe that other viewport settings like "initial-scale" and "target-densitydpi" seems to work fine. For example setting initial-scale=2 starts the app zoomed.
(I'm currently testing pinch-zoom on PhoneGap 1.4.1 and HTC Desire HD Android 2.3.3)
I'm beginning to think I have missed something obvious, since I find so little information about similar problems...
The minimal index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="user-scalable=yes" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Minimal AppLaud App</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" charset="utf-8">
var onDeviceReady = function() {
document.getElementById("devready").innerHTML = "OnDeviceReady fired.";
};
function init() {
document.addEventListener("deviceready", onDeviceReady, true);
}
</script>
</head>
<body onload="init();" id="stage" class="theme">
<h2>Minimal AppLaud App</h2>
<p> LOTS OF TEXT WHICH HAVE BEEN REMOVED HERE </p>
<p><span id="devready">onDeviceReady not fired.</span></p>
</body>
</html>
Appreciate any ideas that you might have!
Are you using PhoneGap Build? It is not possible with PhoneGap Build.
With Desktop PhoneGap, if you haven't already, follow the PhoneGap Getting Started with Android Guide and set your code up in an Eclipse Project.
Once set up, edit your Main Java file, as in the getting started guide:
Add the following imports:
import android.webkit.WebSettings;
import android.webkit.WebSettings.ZoomDensity;
Below the 'super.loadUrl("file:///android_asset/www/index.html");' line that you put in, as part of the start up guide, add:
settings.setBuiltInZoomControls(true);
settings.setSupportZoom(true);
settings.setDefaultZoom(ZoomDensity.MEDIUM);
Clean and build your project - zooming should now be allowed.
To restrict how far users can zoom in, add a meta tag, like the one below to every HTML page:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1.5, user-scalable=1">
Just confirmed Pinch Zoom as working on the following Android Phones:
Samsung Galaxy S820L Android 4.4
LG Sunset L33L Android 5.0
With PhoneGap CLI (not the service), on Windows:
C:\>phonegap --version
5.4.1
Android SDK Tools Verion:
24.4.1 (from the SDK Manager)
Here is the code for MainActivity.java (platforms\android\src\com\phonegap\helloworld):
package com.phonegap.helloworld;
import android.os.Bundle;
import org.apache.cordova.*;
import android.webkit.WebView;
import android.webkit.WebSettings;
public class MainActivity extends CordovaActivity
{
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
// Set by <content src="index.html" /> in config.xml
loadUrl(launchUrl);
WebView webView = (WebView) appView.getEngine().getView();
WebSettings settings = webView.getSettings();
settings.setBuiltInZoomControls(true);
settings.setDefaultZoom(WebSettings.ZoomDensity.MEDIUM);
settings.setSupportZoom(true);
}
}
And this is in index.html:
<meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=3, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
One additional note - with this call:
settings.setDefaultZoom(WebSettings.ZoomDensity.MEDIUM);
got this when building:
uses or overrides a deprecated API - Note: Recompile with -Xlint:deprecation for details
Commented it out, and Zoom was not affected.
Thank you guys!!!
Whoever even after this didn't find a solution, I found an answer in Github:
https://github.com/LouisT/cordova-useragent/issues/1
Basically you have to:
import android.webkit.WebView;
And then:
// super.appView.getSettings().setBuiltInZoomControls(true);
// super.appView.getSettings().setDefaultZoom(ZoomDensity.MEDIUM);
// super.appView.getSettings().setSupportZoom(true);
// Instead use this
WebView webView = (WebView) appView.getEngine().getView();
WebSettings settings = webView.getSettings();
settings.setBuiltInZoomControls(true);
settings.setDefaultZoom(ZoomDensity.MEDIUM);
settings.setSupportZoom(true);
For cordova 5.x.x you need to use the solution from https://github.com/LouisT/cordova-useragent/issues/1
import android.webkit.WebView;
WebView webView = (WebView) appView.getEngine().getView();
WebSettings settings = webView.getSettings();
settings.setBuiltInZoomControls(true);
settings.setDefaultZoom(ZoomDensity.MEDIUM);
settings.setSupportZoom(true);
For me, it was required to change ZoomDensity.MEDIUM to WebSettings.ZoomDensity.MEDIUM
I have exactly the same issue and besides testing different viewport settings, I have tried the suggestions from this: Pinch Zoom in Android with Phonegap and jQUERY Mobile but I can't make it work (testing on Samsung Galaxy SII, Android 4.0.3). However, others have reported successful pinch-zooming using the tips from the link. Hope it helps you too!
The html5 document should begin with:
<!DOCTYPE html>
Without this line did not work the viewport AppBrowser in Phonegap Android