EDIT: This bug is Webview overriding the default minimum font size.
In my example, Webview sets the minimum font-size to 8px somewhere. The solution is below :)
Android Webview rem units scale way to large.
All rem units appear 8 times too large and out of place in Android Webview.
The only rem tag that works correctly is font-size:30rem; for text. Everything else
seems to scale way to large. i.e. 100rem = 800px # 1.0px scale.
Strangely, after I pass 8.0px while scaling, the box starts to enlarge.
This example works on every browser that supports rem units except Webview.
Anyone have an idea?
Online Example: http://digitalknob.com/rem.html
JSFiddle Example: https://jsfiddle.net/aquawicket/71p49ag9/
Android Example: http://digitalknob.com/remTest.apk
I've tried mWebView.getSettings().setLoadWithOverviewMode(true);
I've tried mWebView.getSettings().setUseWideViewPort(true);
I've tried < meta name="viewport" content="width=device-width, user-scalable=no" /> and other variations.
I've tried loading a default user style sheet.
rem.html
<!DOCTYPE html>
<html style="font-size:1.0px;">
<head>
</head>
<body style="font-size:16em;">
<button style="position:absolute;width:100px;height:100px;font-size:60px;" onclick="ScaleDown()">-</button>
<button style="position:absolute;left:110px;width:100px;height:100px;font-size:60px;" onclick="ScaleUp()">+</button>
<a id="text" style="position:absolute;top:20px;left:220px;font-size:60px;">1.0px</a>
<!-- FIXME: rem units appear 8 times too large and out of place in Android Webview.
The only rem tag that works correctly is font-size:30rem;
This html file works as expexted on all other browsers. -->
<div style="position:absolute;top:115px;width:100rem;height:100rem;background-color:green;">
<a style="position:relative;top:30rem;left:16rem;font-size:30rem;">Scale</a>
</div>
<script>
var scale = window.devicePixelRatio;
Update_Scale();
function ScaleDown(){
scale -= 0.5;
Update_Scale();
}
function ScaleUp(){
scale += 0.5;
Update_Scale();
}
function Update_Scale(){
document.documentElement.style.fontSize = parseFloat(scale).toFixed(1)+"px";
document.getElementById("text").innerHTML = parseFloat(scale).toFixed(1)+"px";
}
</script>
</body>
</html>
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="digitalknob.remTest"
android:installLocation="auto"
android:versionCode="1"
android:versionName="1.0">
<uses-sdk android:targetSdkVersion="19" android:minSdkVersion="19"></uses-sdk>
<uses-permission android:name="android.permission.INTERNET"/>
<application android:label="remTest"
android:icon="#mipmap/icon"
android:theme="#android:style/Theme.NoTitleBar.Fullscreen">
<activity android:name="digitalknob.remTest.WebviewActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
WebviewActivity.java
package digitalknob.remTest;
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
public class WebviewActivity extends Activity {
private WebView mWebView;
#Override protected void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.webview);
mWebView=(WebView)findViewById(R.id.webview_webview);
mWebView.setWebContentsDebuggingEnabled(true); //Debuggable in Chrome
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setLoadWithOverviewMode(true);
mWebView.getSettings().setUseWideViewPort(true);
mWebView.loadUrl("http://digitalknob.com/rem.html");
}
#Override public void onBackPressed(){
System.exit(0);
}
}
webview.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<WebView
android:id="#+id/webview_webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</RelativeLayout>
I found that setting the following webview settings will act as a workaround for this bug.
mWebView.getSettings().setMinimumFontSize(1);
mWebView.getSettings().setMinimumLogicalFontSize(1);
setMinimumFontSize
These settings really should only be honored for actual text display, not rem based positioning/sizing. This must but an android webview bug.
Related
i am trying to use accordion future in my android app . but that future is not working.Please
assist me
Below are my source code
activity_main
Below are my source code
Below are my source code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.muslim.bootstrap.MainActivity">
<WebView
android:id="#+id/mybrowser"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</WebView>
</RelativeLayout>
my java file
Below are my source code
Below are my source code
public class MainActivity extends AppCompatActivity {
WebView MyBrowser;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView MyBrowser = (WebView) findViewById(R.id.mybrowser);
MyBrowser.loadUrl("file:///android_asset/index.html");
}
}
html file
Below are my source code
Below are my source code
Below are my source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Bootstrap 3 Accordion</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. Learn more.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. Learn more.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. Learn more.</p>
</div>
</div>
</div>
</div>
<p><strong>Note:</strong> Click on the linked heading text to expand or collapse accordion panels.</p>
</div>
</body>
</html>
Below are my source code
Below are my source code
Below are my source code
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.muslim.bootstrap">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<application
android:allowBackup="true"
android:icon="#mipmap/ic_launcher"
android:label="#string/app_name"
android:roundIcon="#mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="#style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
i am trying to use accordion future in my android app . but that future is not working
please help
Modification in your Mainactivity
public class MainActivity extends AppCompatActivity {
WebView MyBrowser;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView MyBrowser = (WebView) findViewById(R.id.mybrowser);
// For allowing Javascript
WebSettings settings = MyBrowser.getSettings();
settings.setDomStorageEnabled(true);
settings.setJavaScriptEnabled(true);
settings.setJavaScriptCanOpenWindowsAutomatically(true);
MyBrowser.loadUrl("file:///android_asset/index.html");
}
}
and also make sure in XML. your web view's height and width should be match_parent
WebView MyBrowser = (WebView) findViewById(R.id.mybrowser);
WebSettings webSettings = MyBrowser.getSettings();
webSettings.setJavaScriptEnabled(true);
MyBrowser.loadUrl("file:///android_asset/index.html");
Try this ,you have to enable javascript
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'm trying to make an Android app with a webview in which I have an html page. This one contains a "div" tag with the contentEditable property set to true.
My problem: by launching the app, I can't edit the text.
I've been doing a lot of searches on Google but there was nothing on this topic. I was wondering if there was any permission missing (as the one to reach the net in the manifest) but I'm able to edit input and textarea tags (among others). I've refered to the WebView's API, WebViewClient, WebChromeClient but I didn't find any method which would configure a particular permission in order to do that.
Does the webview understand the contentEditable property? It's not working, even if the webview is supposed to interpret html.
My activity:
public class WebAppStackOverFlowActivity extends Activity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
WebView webView = (WebView) findViewById(R.id.webView) ;
webView.setWebChromeClient (new WebChromeClient()) ;
webView.loadUrl("file:///android_asset/www/index.html") ;
}
}
My asset/www/index.html file:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input id="name" value="this is an input tag" />
<br />
<div contenteditable="true">this is an editable div tag</div>
<br />
<textarea rows="" cols="">this is a textarea tag</textarea>
</body>
</html>
My main.xml file:
<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/webView"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
contentEditable is supported by the default browser on Android version 3.0 (Honeycomb) and up (source).
So, if you're running this on Gingerbread, that would explain why it's not working.
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.
I am new to Stack Exchange and Andorid development.
I am working on Android webview. I have the following code in my activity class.
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
WebView wv;
WebSettings ws;
try {
wv = (WebView) findViewById(R.id.webview);
ws = wv.getSettings();
ws.setJavaScriptCanOpenWindowsAutomatically(true);
ws.setJavaScriptEnabled(true);
wv.clearCache(true);
wv.loadUrl("http://<ip address>:<port>/<context>");
} catch (Exception e) {
e.printStackTrace();
}
}
in layout-main.xml:
<WebView
android:id="#+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
in AndroidManifest.xml:
<uses-sdk android:minSdkVersion="10" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<application
android:icon="#drawable/ic_launcher"
android:label="#string/app_name" >
<activity
android:name=".POCActivity"
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>
In the url I have index.html with the following code:
<!DOCTYPE html>
<html>
<head>
<title>Contact Example</title>
<script type="text/javascript">
alert("Start");
</script>
</head>
<body>
<p>Database 1</p>
<div id="test"></div>
</body>
</html>
Working Environment:
- Eclipse indigo
- Android SDK min version 10
- Build Target 2.3.3
But the android code is working only once i.e. when I create a new android project and run the same, I can see the javascript alert appearing. From next time the javascript alert is not displayed. Even is any text changes(Say I modified "Database 1" to "Database 2") in the html page is also not displayed.
I tried the following:
- Cleared appcache
- Uninstalled the application and then ran the project again
- Cleared
Please let me know what I am doing wrong here. Any help will be much appreciated.
webView.setWebViewClient(new WebViewClient());
webView.setWebChromeClient(new WebChromeClient());
Used these on my code and then my alert() worked pefectly
This is a very old question, but I recently encountered the same problem and would like to share the solution to anyone who come across this later.
You will need to assign a custom WebChromeClient to your WebView to handle the alert.
mWebView.webChromeClient = object : WebChromeClient() {
override fun onJsAlert(view: WebView?, url: String?, message: String?, result: JsResult?): Boolean {
val alertDialog = AlertDialog.Builder(context)
.setMessage(message)
.setPositiveButton("OK") { dialogInterface, _ ->
dialogInterface.dismiss()
result?.confirm()
}
.setOnCancelListener { result?.cancel() }
.setCancelable(true)
.create()
alertDialog.setCanceledOnTouchOutside(true)
alertDialog.show()
//Here AlertDialog is just an example. You can also simply show a Toast.
//But remember to call JsResult.confirm() or JsResult.cancel()
return true
}
}
You need to call either JsResult.confirm() or JsResult.cancel() to notify your WebView whether the user confirmed or canceled the alert dialog. Otherwise, the WebView would assume an alert dialog is still showing(blocking the UI) and won't allow a new one to be shown.