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.
Related
I have seen this question, but my goal is to simply view an HTML page correctly in a web browser on Android. Simply put, the .html file contains the following code:
<!DOCTYPE html>
<html>
<head>
<style>a {font-size:25px;}</style>
</head>
<body>
Some text<br>
</body>
</html>
I'm trying to view this file on my phone with the large font size that is set in style. But every browser I have tried changes the font size to normal when loading. I know about the "accessibility" setting, but that doesn't meet my needs as it changes the font size for every page, and is also not big enough.
I have also tried other ways to change font size, such as using font-size property inside <a> tag, <big> tag around the text, and the font size changes accordingly on desktop but android doesn't follow suit. Any help would be appreciated!
Add <meta name="viewport" content="width=device-width, initial-scale=1"> in your head tag.Read docs here
<!DOCTYPE html>
<html>
<head>
<style>a {font-size:25px;}</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
Some text<br>
</body>
</html>
Try add in the head tag the following meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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.
We have a large proprietary MRP system based on 4D.
We are creating a very simple web page served by 4D that has a text box.
How do I convince iphones and androids to make the text box the width of the screen, so the user does not have to manually zoom?
<!DOCTYPE html>
<HTML>
<HEAD>
<style type="text/css">
</style>
</HEAD>
<META NAME="GENERATOR" CONTENT="4th Dimension - 4D">
<TITLE> Real Time Collection
</TITLE>
<BODY>
<FONT size="5";bold>
<FORM ACTION="/ProcessJobHours" METHOD=POST>
Employee ID#<BR>
<INPUT TYPE=TEXT NAME=Emp VALUE="" style="height: 48px; width: 250px;
font-size: 24pt;"><BR>
<!-- OK is a particular case-->
<INPUT TYPE=SUBMIT NAME=WEBOK VALUE="Ok">
</FORM>
</BODY>
</HTML>
What I get is:
What I want is:
I think the viewport suggestion by Alex B is a good start. Try adding this to your the section of your HTML.
<meta name="viewport" content="width=device-width, initial-scale=1">
I believe what you are looking for on mobile rendering of a web page is called viewport. I think this blogpost clarifies it fairly well.
http://bravenewmethod.wordpress.com/2011/08/28/html5-canvas-layout-and-mobile-devices/
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...