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.
Related
I have an issue when testing a phoengap app on my Samsung Galaxy smart phone. On the initial load, the body does not fill 100% of the viewport's height (see image.)
This happens irrespective of whether the phone is in portrait or landscape mode. However, as soon as the phone is rotated, the content fills the full height. And the problem does not appear on each future load, only if I have cleared the cache.
Does anyone know what could be causing this?
Here is the markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Untitled Document</title>
<style>
html, body {
background:#CC9;
height: 100vh;
min-height: 100vh;
}
</style>
</head>
<body>
hello
</body>
</html>
Is the gap where the navigation bar would be if the phone didn't have physical controls?
I encountered a similar problem with the menu bar on my galaxy j5 on resuming. I solved it by using cordova-plugin-statusbar and then adding code to onResume to force a refresh:
window.setTimeout(function () { StatusBar.hide(); console.log("hidden"); }, 1000);
I can see that there is a cordova-plugin-navigationbar (but haven't looked further into it) - perhaps a similar approach would work for your issue?
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;
}
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 overlooked all the web ( i guess) and tried to find the solution for this task:
I have all requirements to show a correct content on mobile(I mean meta media and css media and so on), but on my android phone I can scroll to the right. I checked if there are no divs with width more than 320px. Website I'm talking about is http://vasiliib.p.ht/leverage/
I tought this is cause my page content and created a separate page http://vasiliib.p.ht/leverage/mobile.html. Here I inserted simple html code. And, there is the same problem..
I am frustrated .. Please clean my eyes..and show me my mistake, please..
looking forward for your reply.
regards.
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
This is the correct answer. It works perfectly.
body{
margin:0px;
}
should read:
body{
margin:0 auto;
}
Where are you handling you're responsive design stuff?
Also this:
.bg-course-content-02 {
background-image: url("http://vasiliib.p.ht/leverage/files/css/../img/bg-course-content-02.png");
margin-left: -970px;
width: 923px;
height: 555px;
}
This:
.bg-course-content-04 {
background-image: url("http://vasiliib.p.ht/leverage/files/css/../img/bg-course-content-04.png");
margin-left: -970px;
width: 923px;
height: 555px;
}
and this:
.bg-course-content-06 {
background-image: url("http://vasiliib.p.ht/leverage/files/css/../img/bg-course-content-06.png");
margin-left: -970px;
width: 923px;
height: 555px;
}
check your widths..
Have you included the meta tag inside the head tag of the HTML?
<meta name="viewport" content="width=device-witdh, initial-scale=1">
that meta tag set the width of the page to the width of your device.
I'm trying to target Android devices with a CSS file, but I've been unsuccessful until now.
I'm using the following CSS code:
#media only screen and (max-device-width: 800px) {
body { max-width: 100%; background-color:#000; }
}
I'm also invoking the css code with the following line in the PHP file:
<link rel="stylesheet" type="text/css" href="small.css" />
Any thoughts on what I might be doing wrong?
Thanks
Within PHP, you can check user agent, and based on that apply an appropriate style sheet.
And don't forget the viewport setting within a meta tag:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />