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.
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">
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
what I need is
-disabled zoom function
-fullscreen page (both in web browser and mobile view)
-disabled scrolling page
what I have done so far..
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes">
</head>
<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0">
</body>
I can't figure it out how to make the page fullscreen on mobile view.
When I run on my phone, it just display half of the page. While leaving the other space blank.
Please help me solve it.
Thank you very much.
full screen & zoom :
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
and for disabled scroll try to add this in ur css :
html, body {
overflow-x: hidden;
}
and try to delete all margin settings in your body tag by this properties in your main css file
* {
margin : 0;
padding: 0;
}
This seems to work great on all PC browsers, and on Mac/iPhone Safari, but no iframe appears on Android Chrome. It should appear half below the bottom, half above... How can I safely achieve bottom positioning?
<html>
<head>
<meta name="viewport" content="initial-scale=1, width=device-width">
</head>
<body>
<table width="700"><tr><td>Test</td></tr></table>
<iframe src="http://www.ibm.com"
style="position:fixed; left:0px; width:600px; bottom:-200px; height:400px;">
</iframe>
</body>
</html>
(This is actually a simplification of much bigger code that has the same problem. Please help...)
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...