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" />
Related
I'm having a problem with Android WebView for my websites. When I open my site on any browser, the CSS style sheet, JavaScript and Images load. But when I open for example through Instagram (which uses WebView), I just have the html, naked.
I precise that all my links are in relative (I have a tag which indicates from where to look for the files).
Here, my base is <base href="http://anthony-e-b.rf.gd/" target="_top">
and my CSS, my images, and my JS refer to this as:
<link rel="stylesheet" href="assets/main.css"> (for the CSS).
Same for my pictures : href="assets/pics/mon_image.jpg".
I do not understand, and although I search the Internet I do not see any solution ...
thank you in advance for your help
Try:
WebView myWebView = findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
Hope it will help!
Many of the answers I've been seeing here are 6+ years old so I was wondering if I could get a more recent answer as they haven't been working for me. I have an html file file.html which contains a
<LINK href="stylesheet.css" type="text/css" rel="stylesheet">
for the CSS and the following for the javascript:
<script src="myscript.js"></script>
file.html, stylesheet.css and myscript.js are all stored in app/assets/Content/
So I am trying to run it with:
WebView webView = (WebView) findViewById(R.id.event_webview);
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webView.loadUrl("file:///assets/Content/file.html");
However, the WebView is showing the error:
Webpage not available: The webpage at
file:///assets/Content/file.html could not be loaded because
net::ERR_FILE_NOT_FOUND
I have also considered using loadDataWithBaseURL but this requires the data field to contain all of the html which is too big of a file to hardcode.
Does anybody know how I could use html+css+javascript for a WebView?
Your URI for asset folder is incorrect. Change asset to android_asset. As follows:
webView.loadUrl("file:///android_asset/file.html");
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">
I have a WebView in my app that has a form in the HTML with editable text fields. When the user taps on one of these fields, the WebView zooms in slightly, which I don't want. This only happens in Android 4.4 because of how I'm scaling the WebView for older versions (see code below).
I've seen Disable zoom when clicking on form fields within a WebView?, which addresses my question for older Android versions, solving the problem using WebSettings.setDefaultZoom(ZoomDensity.FAR), but that setting is deprecated in 4.4. Even still, I've tried a variety of combinations including setting this property, and my WebView still gets zoomed in.
Code creating the WebView:
public View createView(float parentWidth) {
mWebView = new ObservableWebView(mContext);
mWebView.getSettings().setJavaScriptEnabled(true);
//Listener for Console Messages
mWebView.setWebChromeClient(new MyWebChromeClient());
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT){
mWebView.setInitialScale(Globals.convertDpToPx(100));
} else{
WebSettings settings = mWebView.getSettings();
settings.setSupportZoom(false);
settings.setBuiltInZoomControls(false);
settings.setDisplayZoomControls(false);
}
loadURL();
return mWebView;
}
public void loadURL() {
mWebView.clearHistory();
mWebView.removeAllViews();
mWebView.loadUrl(mData.getUrl());
}
Thanks in advance for any help.
You could add to the head of your HTML page the tag:
<meta name="viewport" content="user-scalable=no, width=device-width">
And, if you can't change the original HTML, you can alter it running a bit of JavaScript code after the page has been loaded in your WebViewClient. Something like:
#Override
public void onPageFinished(WebView view, String url) {
view.loadUrl("javascript:"
+ "var newMeta = document.createElement('meta');"
+ "newMeta.setAttribute('name', 'viewport');"
+ "newMeta.setAttribute('content', 'user-scalable=no, width=device-width');"
+ "document.getElementsByTagName('head')[0].appendChild(newMeta);"
);
super.onPageFinished(view, url);
}
I've tested it on a Samsung Galaxy Tab 4 10.1 running KitKat. On other devices this code causes some side effects, so it's better to execute it only if you are on KitKat or higher.
Have you tried disabling zoom by setting a viewport meta tag?
<meta name="viewport" content="width=device-width, user-scalable=no">
You need to call settings.setUseWideViewport(true); for that to take effect.
This is about loading youtube videos using latest embedded format (iframe) inside a webview.
Example of the iframe embed format
<iframe width="637" height="358" src="http://www.youtube.com/embed/olC42gO-Ln4?fs=1&feature=oembed" frameborder="0" allowfullscreen=""></iframe>
Test the code on Android 2.3.3 & 3.2 devices (HTC Desire & Asus Transformer), the webview would only show a black rectangle.
I tried a similar embed from vimeo
<iframe src="http://player.vimeo.com/video/35693267" width="640" height="360" frameborder="0"></iframe>
In 2.3, video played correctly
In 3.2, a black rectangle flashed and disappeared, the iframe area is blank.
Finally if the old embed format (using the object tag) is used, the video is displayed properly inside the webview in both 2.3.3 & 3.2.
I have checked related questions and added
android:hardwareAccelerated="true"
in the application and/or activity tag but still no video in both 2.3 & 3.2 devices.
This is a big problem because more websites are now using the newest format (iframe) to embed their youtube videos. Android/Youtube Team, please take a look at this problem.
Android browsers are utterly buggy what comes to video playback and embedding. It simply does not work across devices. Trying to get it working is just waste of your time. My suggestion is that you don't try to include <iframe> but simply provide a thumbnail of the video which directly links to YouTube page or h264 file.
Earlier discussion, with a possible solution.
Google Reader-esque optimizing of WebViews on Android
If you want to play videos within your WebView you NEED to load the data with a base URL!
DONT do this:
mContentWebView.loadDataWithBaseURL(null, webViewContentString,
"text/html", "UTF-8", null);
DO THIS INSTEAD:
//veryVeryVery important for playing the videos!
mContentWebView.loadDataWithBaseURL(theBaseUrl, webViewConentString,
"text/html", "UTF-8", null);
The Base URL will be the something like the "original" url of what you are displaying in your WebView. So let's say you are making a news reader, the WebView's base url will be the url of the original story.
Good Luck!
Also remember to set up your WebView...Like so...
mContentWebView.setWebChromeClient(new WebChromeClient());
mContentWebView.getSettings().setPluginState(WebSettings.PluginState.ON);
mContentWebView.getSettings().setPluginState(WebSettings.PluginState.ON_DEMAND);
mContentWebView.setWebViewClient(new WebViewClient());
mContentWebView.getSettings().setJavaScriptEnabled(true);
You need to have hardware acceleration turned on in the Manifest (only available on SDK 14 and above).
Ex. Hardware Acceleration On:
<application
android:name="com.example.app"
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
android:theme="#style/AppTheme"
android:hardwareAccelerated="true">
<!-- hardwareAccelerated requires SDK 14 -->
...
</application>
HTML5 Video support
In order to support inline HTML5 video in your application, you need to have hardware acceleration turned on, and set a WebChromeClient.
http://developer.android.com/reference/android/webkit/WebView.html
(Hope it help someone)
This worked for me- the code opens youtube site and can play its videos inside WebView:
mWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
String frameVideo = "<html><body>Youtube video .. <br> <iframe width=\"320\" height=\"315\" src=\"https://www.youtube.com/\" frameborder=\"0\" allowfullscreen></iframe></body></html>";
mWebView.loadData(frameVideo, "text/html", "utf-8");
mWebView.loadUrl("http://www.youtube.com/");
mWebView.setWebViewClient(new WebViewClient());
I would suggest using some code to detect the environment of the user... use the iframe code only for ios devices (iphone, ipod, ipad) and use the old code for everyone else.
This Code made exactly fit to different device
webView.setInitialScale(1);
webView.setWebChromeClient(new WebChromeClient());
webView.getSettings().setAllowFileAccess(true);
webView.getSettings().setPluginState(WebSettings.PluginState.ON);
webView.getSettings().setPluginState(WebSettings.PluginState.ON_DEMAND);
webView.setWebViewClient(new WebViewClient());
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
DisplayMetrics displaymetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
int height = displaymetrics.heightPixels;
int width = displaymetrics.widthPixels;
Log.e(SimpleBillsConstants.SIMPLE_BILLS, width + "-" + height);
String data_html = "<!DOCTYPE html><html> <head> <meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"target-densitydpi=high-dpi\" /> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> <link rel=\"stylesheet\" media=\"screen and (-webkit-device-pixel-ratio:1.5)\" href=\"hdpi.css\" /></head> <body style=\"background:black;margin:0 0 0 0; padding:0 0 0 0;\"> <iframe style=\"background:black;\" width=' "+width+"' height='"+height+"' src=\""+ VIDEO_URL+"\" frameborder=\"0\"></iframe> </body> </html> ";
webView.loadDataWithBaseURL("http://vimeo.com", data_html, "text/html", "UTF-8", null);