I'm devloping an apk to display some web pages by using webview.
The web pages have two size:
640*530
<meta name="page-view-size" content="640*530" />
it's diaplayed like this
1280*720
<meta name="page-view-size" content="1280*720" />
it's now displayed full screen
How can i display all size pages in fullscreen with one webview?
The device is version is Android 4.4.2
I've tried these methods:
WebSettings webSettings = mWebView.getSettings();
webSettings.setSavePassword(false);
webSettings.setSaveFormData(false);
webSettings.setJavaScriptEnabled(true);
webSettings.setPluginState(PluginState.ON);
webSettings.setSupportZoom(true);
webSettings.setLoadWithOverviewMode(true);
webSettings.setUseWideViewPort(true);
neither one is work for me.
Thanks.
you can try this for your web page header:
<meta id="viewport" name="viewport" width="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
Related
I have and application, which displays html content from other sources. This content may contain iframe embedded videos. For special case of twitter videos the behavior is different and video remains blank after running.
The logcat shows message:
Refused to display 'videoUrlHere' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors *".", source: about:blank (0)
Example url is: https://twitter.com/i/videos/tweet/840948416742117377?embed_source=clientlib&player_id=0&rpc_init=1&language_code=en
The interesting thing is that this approach works on android 5 and lower.
Loading of content
mWebView.loadDataWithBaseURL("file:///android_asset/", mHtmlSource.toString(), "text/html", "utf-8", null);
Initialization of WebView:
mWebView.setWebViewClient(new MyWebViewClient());
mWebView.setWebChromeClient(new WebChromeClient());
mWebView.addJavascriptInterface(new InjectedAppObject(), "InjectedAppObject");
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setDomStorageEnabled(true);
webSettings.setSupportZoom(true);
webSettings.setBuiltInZoomControls(true);
webSettings.setDisplayZoomControls(false);
webSettings.setLoadsImagesAutomatically(true);
Headers added to html:
<html lang=\"cs\" dir=\"ltr\">
<head>
<meta charset=\"utf-8\">
<meta name=\"keywords\" content=\"\">
<meta name=\"description\" content=\"\">
<meta http-equiv=\"Content-Security-Policy\" content=\"default-src * data: \'unsafe-inline\' \'unsafe-eval\'; frame-ancestors *; \">
<meta name=\"robots\" content=\"index,follow\">
<title>App title</title>
<link href=\"file:///android_asset/html/css/style.css\" rel=\"stylesheet\">
<script src=\"file:///android_asset/html/js/jquery.min.js\"></script>
<script src=\"file:///android_asset/html/js/app.js\"></script>
<script src=\"file:///android_asset/html/js/disposable-iframe.min.js\"></script>
<script src=\"file:///android_asset/html/js/iframe.js\"></script>
</head>
Using Android Studio and avd emulator. css defintely loading, js will execute from within head or attached to body tag, but not from external file in assets.
My MainActivity:
WebView webview = new WebView(this);
webview.setWebChromeClient(new WebChromeClient());
WebSettings webSettings = webview.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setAllowUniversalAccessFromFileURLs(true);
webSettings.setAllowFileAccessFromFileURLs(true);
webview.loadDataWithBaseURL("file:///android_asset/", html, "text/html", "UTF-8", null);
setContentView(webview);
My html head:
<link rel="stylesheet" href="my.css" />
<script src="jquery.mobile.min.js" type="text/javascript" />
<script src="my.js" type="text/javascript" />
Test JS (no jquery) that executes in head but not in external my.js:
function var1() {
document.getElementById('jstest').innerHTML = 'hi';
}
window.onload = var1;
My Current sentiment:
Charlie Brown.
Changing to jquery.min.js and getting rid of the mobile version has resolved everything. It probably sent the entire js into tilt, but the inline was processing first.
I have a js game code which I am showing in a webview. The code is defined such that it takes up the entire html page template, and when I pull it in a webview, I adjust the size accordingly.However, it zooms on double taps, which makes it difficult to play the game.How do I prevent it from zooming. Also, is there a way to speed up the performance, as the game is extremely slow and not ideal right now.
Here's the code for the webview:
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.main);
WebView webview = (WebView)findViewById(R.id.webview);
webview.setInitialScale(1);
webview.getSettings().setJavaScriptEnabled(true);
webview.getSettings().setLoadWithOverviewMode(true);
webview.getSettings().setUseWideViewPort(true);
webview.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
webview.setScrollbarFadingEnabled(false);
// webview.getSettings().setRenderPriority(RenderPriority.HIGH);
// webview.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
webview.loadUrl("file:///android_asset/index.htm");
//webview.getSettings().setBuiltInZoomControls(true);
webview.getSettings().setSupportZoom(false);
Thanks,
Brian
My HTML Code bit :
<html>
<head>
<meta charset="utf-8">
//meta data tag below
<meta name="viewport" content="width=device-width,... etc>
<title>Dino Dragon </title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
Have you placed in the beginning of your HTML document the following definition:
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
This could prevent the webview from 'zooming in'.
You might need to extend a customized webview and override the onTouchEvent method.
And in the event callback, call setSupportZoom(false). Something like this:
#Override
public boolean onTouchEvent(MotionEvent ev) {
getSettings().setSupportZoom(false);
return super.onTouchEvent(ev);
}
Use instead of
webView.getSettings().setUseWideViewPort(true); to
webView.getSettings().setUseWideViewPort(false);
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" />
i am designing an app common for both andorid and ios apps. In this in a particular activity i am loading an url which contains an image. The size of the image is to be as
width - 960 and height - 640.
In the php code we have added the following line
<meta name="apple-mobile-web-app-capable" content="yes">
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name='viewport' content='width=320'/>
so that the webpage may get fitted within the screen size itself. This worked good for iPhone, whereas in android device i have loaded the page in a webview. My layout is as follows
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<WebView android:id="#+id/webView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</WebView>
</LinearLayout>
in my coding part is as follows
webView = (WebView)findViewById(R.id.webView1);
WebSettings webSettings = webView.getSettings();
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("http://xxxxxxxx.com/page/8");
But still in my 480x854 device on android 2.1 version i am getting some white spaces in the bottom and right corner of the web page
Where as in the WVGA854 emulator of android2.2 the view gets appeared with a horizontal and vertical scroll bars.
In all the android device i need the webpage to be exactly withing the screen size, without any white spaces or scroll bars.how to get this.....
Try adding android:scrollbarStyle="outsideOverlay" attribute to the WebView xml description.
Some what i have managed the problem as follows
webView = (WebView)findViewById(R.id.webView1);
if(width == 320 || width == 360)
{
WebSettings webSettings = webView.getSettings();
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("http://xxxxxxxxxx.com/get/6");
}
else if(width == 480)
{
WebSettings webSettings = webView.getSettings();
webSettings.setUseWideViewPort(true);
webView.setInitialScale(85);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("http://xxxxxxxxxx.com/get/6");
}
else if(width == 540)
{
WebSettings webSettings = webView.getSettings();
webSettings.setUseWideViewPort(true);
webView.setInitialScale(90);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("http://xxxxxxxxxx.com/get/6");
}
else if(width > 540)
{
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("http://xxxxxxxxxx.com/get/6");
}
else
{
WebSettings webSettings = webView.getSettings();
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("http://xxxxxxxxxx.com/get/6");
}
You can try changing the viewport meta tag to:
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1">