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
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 this following page
Now on my text and other contents, my text and images are pixelated. on bigger devices.
as you can see in the image the text on nexus s looks great. but on galaxy nexus its pixelated.
this is my meta tag
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">
when I add target-densitydpi=device-dpi everything becomes smaller and my media queries doesn't work. it shows how the website viewed in a desktop version.
How can i make it nice on the galaxy nexus?
Try this.
http://www.icondeposit.com/blog:how-to-properly-smooth-font-using-css3
html, html a {
-webkit-font-smoothing: antialiased !important;
}
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 have this webview with a Form, when I clicked on a textbox to type, this is what's happening:
I have this on my html form:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
I'm using samsung galaxy tab 2, android ice cream sandwich. I have the same experience on honeycomb.
I tried adding:
-webkit-transform: translate3d(0,0,0);
on the container and/or the input element itself, but nothing worked.
Thanks for any ideas on how do I fix this!
EDIT:
My html:
<td class='valign_top' style='width:30%; -webkit-transform: translate3d(0,0,0);'>
<div class='cell_lbl'>P.O. Number:</div>
<input type='text' name='po_number' id='po_number' style='width:100%;' />
</td>
When I tried it in built in browser, IT'S FINE.
You should try to apply this:
-webkit-user-modify: read-write-plaintext-only;
-webkit-tap-highlight-color: rgba(255,255,255,0);
or this:
-webkit-user-modify: read-write-plaintext-only;
-webkit-tap-highlight-color:#3072af;
to your input box elements.