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>
Related
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
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 show following html code in a WebView. When I set the html code with webView.loadData() the display focused the first image automatically. If I have one or more images, that doesn't matter.
How can I cancel or stop auto-focus / auto-scrolling to image und stay at top of the display ?
I mean, I don't want to disable vertical scrolling, I only want to cancel this behaviour when showing html at first.
<!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">
<head>
<title></title>
</head>
<body bgcolor="white">
<p>Some Text...</p>
<img src="http://..pic1.gif" style="max-width:100%;" /><br><br>
<img src="http://..pic2.gif" style="max-width:100%;" /><br>
<p>Some Text...</p>
</body>
</html>
not sure that I understood what you meant, but you could use
webView.setInitialScale()
to set it's size and
pageUp(boolean) or pageDown(boolean)
to set it to start/end.
It's my fault. I had a ScrollView as a parent of WebView. The WebView don't auto-scroll, but my parent ScrollView did that.
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...