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?
Related
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 am facing a very strange issue with Nexus 7 regarding CSS media queries. The media query runs fine on orientation change, but if we keep the device in landscape mode and keep it idle for some time and then on orientation change the viewport takes the styling of the landscape mode other than the portrait mode styling.
Here is the code that I have written
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div></div>
</body>
</html>
And in the css file the styling is as below.
div {height: 500px; width: 500px;}
#media only screen and (min-width:480px) {
div {background: red;}
}
#media only screen and (min-width:768px) {
div {background: green;}
}
For other devices like Ipad, Iphone, S3 etc the media queries runs fine even if these devices are kept idle and then on orientation it takes the respective viewport styling, but on Nexus 7 the div colour remains green when the orientation changes from landscape to portrait view after the device is kept idle for some time.
Please help me out with this situation.
Try updating your viewport meta tag attributes <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
I have a very unusual bug that appears on my Android 4.0 on Galaxy Note. Some friends see the same on their Galaxy S3. I simplified my code to the following:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0,initial-scale=1.0, user-scalable=no" />
<style type="text/css">
#movieplayer {width:100%; position:fixed; top:0px; left:0px; right:0px; bottom:0; background:yellow; z-index: 90;}
.player, .project-info {width:100%}
#movieplayer .short-info {width:100%;background:green;display:block;position:relative;}
</style>
</head>
<body class="works">
<div id="global-container">
<div id="movieplayer">
<div class="player">
<div class="project-info movie">
<div class="short-info jspScrollable">
<div class="container">
hello
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
When you first load up this page in PORTRAIT, you should see a green bar on top of a yellow background. They both fill the screen width 100%. When you rotate the phone to landscape, the yellow continues to fill the rest of the screen, but the green bar fails to fill the remaining width. Why is this?
I am using #movieplayer{position:fixed;} here because in my real code, I rely on that to do some other stuff. So I can't use position:absolute.
This issue seems like a bug in certain versions of the android browser.
The set of elements under the fixed-position container aren't asked to recalculate their width (during reflow) as a result of the resize event.
Your solution works, as it is one of several ways to force this recalculation to occur.
Oddly enough, we've found that any landscape-specific media query in css fixes it for us.
(tested on Galaxy S3):
#media screen and (orientation: landscape){
.doesnt-exist { background:red; }
}
Related links :
Android Issue 27959
Android Issue (dup) 25610
OK, I was able to hack a solution together. I have jquery installed, and then I did a
$('.short-info').css('position','absolute');
setTimeout("$('.short-info').css('position','');", 0);
This is ugly, but it works.
I'm trying to present a simple message to the user in my mobile website.
I want the message size approximately will be the same on mobile devices with similar screen size, for example iPhone and Samsung Galaxy (android).
I read a lot of posts on this issue, and many recommended to use -webkit-text-size-adjust: 100% to make it happen. But I didn't understand how to use it...
The webpage:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html { -webkit-text-size-adjust:100%; }
</style>
</head>
<body>
<div style="text-align:center;font-size:6em;-webkit-text-size-adjust:100%;">
Hello World!
</div>
</body>
</html>
The result:
Did you test the viewports meta?
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, height=device-height"/>
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.