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;
}
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.
I have a problem with the resolution of an image in an app that i'm developing for android. in a few words on a page the image is hard to see, and in another you can see well. css and html are the same for both images, and for this reason I can not explain how it is possible. I attach pictures to help you understand, the screenshots are taken from a samsung galaxy s3!
this is the meta:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi;" />
EDIT:
I noticed that the problem occurs when inside the data-role = "content" there is a "ul". I tried to remove the "ul" from the page where there is an image with poor resolution and in fact the problem goes away...
code list:
var link_markup ='<li id="list1"><a onclick="rowSelectedCardio()" href="#" class="ui-link-inherit"><p style="white-space: normal">'+stringCardio+'</p></a><span><img src="img/'+color+'"></span></li>';
$(link_markup).appendTo('#listaCardio');
and css:
.scrollable {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.classListCardio li {
background:#9D9D9C;
max-height:45px;
height:45px;
margin-bottom:0px !important;
padding:0px !important;
border-bottom-width:1px;
border-bottom-style:solid;
}
.classListCardio img {
margin-top:17px !important;
height:11px !important;
width:7px !important;
}
.classListCardio li a {
height:35px !important;
width:95% !important;
float:left;
}
have you tried removing the target-densityDpi .. it is now deprecated and removed from webkit:
http://trac.webkit.org/changeset/119527
so try any of the following.. this just declares target-density:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no; target-density=device-dpi;" />
and this, with no target-density:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
or this:
<meta name="viewport" content="width=device-width,initial-scale=1">
since target-densityDpi is removed.. try any of the above viewport meta tags
SOLVED:
The problem was given by the z-index property that had been given to the image,
removing the z-index, problem disappeared
I added the following lines to my header, but when I try to view my webpage on an android device I can't scroll down.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
Any ideas why I can't scroll down?
Maybe you have :
html, body {
height: 100%;
}
Some webkit's browsers doesn't like this ;)
You should try to remove this rule.
I have noticed that if a website contains elements with css position: fixed; the screen won't scroll in android devices. You should use position: absolute or relative instead.
I am using the following html code
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>
<body>
test
</body>
</html>
My intention is to prevent user from zooming in or out. The above code isn't working in iPhone and Android. Any solution ?
EDIT: It appears in iPhone settings, if Zoom is selected as On under Settings>Accessibility>Zoom, then this will override meta tag. Source
Not sure why it is happening in android.
I use this tag to prevent zoom on all mobile platforms :
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />
With , and not ;
In my part, I've this "viewport" which work good on an Android (Nexus 5) and on iPhone.
<meta name="viewport" content="width=device-width; initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5; " />
I hope this help you !
Put this script to avoid pinch zoom. in latest version of safari, if meta tag not working
document.documentElement.addEventListener('touchstart', function(event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, false);
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; height=device-height" />
worked well on Samsung Galaxy S3
It seems it doesn't work any longer in the normal iOS (11.3) Browser.
However it still affects the webpage, if added to the homescreen, and launched from there.
So if you touch the share menu, select "Add to Home Screen", and open it up from there it will stop you from zooming as expected:
<meta charset="utf-8" />
<title>luckydonald/SelfhostedMouse</title>
<meta name="apple-mobile-web-app-title" content="SelfhostedMouse" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="user-scalable=no; width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0">
Some time you need to add -webkit-flex:1 to containers (if flexbox in use ofcourse). That is helped me with my viewport problem.