How to load a html content with fixed height and width into a android webview which has height and width set to wrap_content?
This is my HTML page i.e label.html loading from assets.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#charset "utf-8";
/* CSS Document */
.Main{
width:50%;
height:200px;
border: 1px solid #09ED1C;
float:left;
background-color:#00F3FF;
}
H1{
color:#FC1D21;
}
</style>
</head>
<body>
<div class="Main" align="center">
<h1>This page is created using internal CSS</h1>
</div>
</body>
</html>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/blue">
<WebView
android:id="#+id/wv_help"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
WebSettings webSettings = mWebViewHelp.getSettings();
webSettings.setJavaScriptEnabled(true);
mWebViewHelp.setScrollBarStyle(WebView.SCROLLBARS_INSIDE_OVERLAY);
mWebViewHelp.loadUrl("file:///android_asset/label.html");
This is adding white space on the right side of webview even though its wrap_content,WebView.SCROLLBARS_INSIDE_OVERLAY is also not solving my issue,any help would be much appreciated.
You need to add this in your HTML header:
<meta name="viewport" content="width=device-width, initial-scale=1">
So it will look like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>[YOUR_DOCUMENT_NAME]</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
I hope it works so not please respond
Related
I have a HTML file. And I used WebView to load this HTML file. After, the cursor appear on WebView, but I can't input Japanese or even I can't swap other keyboard as number keyboard. But if the HTML file has content in Japanese, It can display normal. The bug appear on Android 4.0.x, but 4.1.x or over don't have this bug.
This is my HTML file that I had created
<!DOCTYPE html>
<html>
<head>
<title>ZSSRichTextEditor</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="ZSSRichTextEditor.js"></script>
</head>
<body onLoad="zss_editor.init();">
<div id="zss_editor_content" style="width: 100%; height: 100%; -webkit-overflow-scrolling: touch; overflow: auto;" contenteditable="true" ></div>
<div id="zss_editor_footer"> </div>
</body>
</html>
I want to show my website on mobile devices in 100% width landscape and portrait view too.
I was tried this HTML code without any CSS declaration:
<!DOCTYPE html>
<html lang="hu">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>test page</title>
</head>
<body>
<div style="width: 1000px; background:#ff0">hello world</div>
</body>
</html>
It works fine in landscape view, but if I start in portrait... so I doesn't work good. It is zoomed in like landscape view.
What is the best practice?
I just loaded your HTML in a basic WebView and it looks fine to me. Maybe it's an issue with your layout and not with the HTML?
Here is the (very basic) WebView I used:
<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/webViewMain"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
And here is the onCreate that I used to test your code:
WebView webView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView)findViewById(R.id.webViewMain);
webView.getSettings().setJavaScriptEnabled(true);
//webView.loadUrl("http://www.google.com");
String data = "<!DOCTYPE html> <html lang=\"hu\"> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\"> <title>test page</title> </head> <body> <div style=\"width: 1000px; background:#ff0\">hello world</div> </body> </html>";
webView.loadData(data, "text/html", Encoding.UTF_8.toString());
}
In response to your comment to my comment:
I'm 99% sure the behavior you want is already the default behavior. When you set the width=device-width part of the viewport it will cause the device to behave similar to you simply resizing the browser window on the desktop.
If you remove that part from the content attribute it should behave the way you want.
I have some problem with content in webview
Simple webview:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<WebView
android:id="#+id/someWebview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
/>
</RelativeLayout>
Here I call that
WebView webView = (WebView)view.findViewById(R.id.someWebview);
webView.clearView();
webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
webView.loadDataWithBaseURL(null, content, null, "utf-8", null);
and content looks something like this
<!DOCTYPE html>
<html>
<head>
<title>some</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;"/>
<style>
*{margin:0; padding:0;}
html, body{width:100%;}
</style>
</head>
<body>
<p style="width:50%; margin: 50px 0 0 100px; background-color: #0000ff">asdasd</p>
<div style="width: 20%; margin-left: 50px; background-color:#ff0000; padding:0 50px;"><p style="background-color:#ffffff;">dfgdfg</p><div style="width:30%;margin-left: 50px;background-color:#1e1e1e;">dsdsd</div></div>
</body>
</html>
So, problem is what margin-left does not work, but margin-top is ok.. how can I fix this? I can't use android:paddingLeft cause i need margin only some content not all of this
I can't add image to post, so uploaded them here: http://imgur.com/FObDiaA,q9W5tvV
first is desktop browser, second webview
Update
So guess I "solve" problem in my case with parsing html and adding container div's with paddings in places where I need, but this is bad hack and guess not all case can use this, so I think question still open - why margins left/right doesn't work?
I want to show some html in a WebView. In that html code there is an image tag "img src" and a style within: style="max-width:300px;max-height:300px;".
My Smartphone's display width is 480px. When I set the max-width style to 480px, the image don't fit to the display and is not complete visible. Around the WebView, there is no Margin or Padding. But when I set the max-width to 300px, the image fits perfectly.
What is the reason of that? My display has a width of 480px und the image with that style 300px.
webView.loadData(newContent, "text/html; charset=UTF-8", null);
Html Code (newContent):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body bgcolor="white" leftmargin="0" topmargin="0">
<img src="http:...jpg" style="max-width:300px;max-height:300px;" />
<p>Text Text Text</p>
</body>
</html>
I have tested many ways and solve this problem by using percent.
Now the image fits perfect to display if die image is large and keep it's width if it is smaller than the display.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body bgcolor="white" leftmargin="0" topmargin="0">
<img src="http:...jpg" style="max-width:100%;" />
<p>Text Text Text</p>
</body>
</html>
i used below content in html page
<html>
<head>
<title>Example</title>
<meta name="viewport" content="
width=device-width,
height =800px,
user-scalable=no" />
</head>
<body>
<img border="0" src="./happy_holi.jpg" alt="Pulpit rock" height="400px"
width="300px">image1</img>
</body>
</html>
iam displaying it in web view.
my problem is, if i do changes for meta tag height and width property no changes is happening in web view. why?
If you want to see some changes, you should change the img height property, or maybe your webview width and height. (maybe you should post apart of xml file)
<img border="0" src="./happy_holi.jpg" alt="Pulpit rock" height="800px" width="600px">image1</img>
The meta tag contain only informations for your bowser...