PhoneGap App Auto Height issue

  • 1
  • Problem
  • Updated 4 years ago
Although I used device-height property in meta tag, I have to scroll little down for different devices like ipad, iphone, LG g2. Height of screen is not set automatically.

Any suggestion ? thx

<!-- <!DOCTYPE html>

<html>

<html lang="tr">

<head>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">-->
<!-- <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<meta name="description" content="">
<meta name="author" content="">

<title>s s</title>

<!-- Bootstrap Core CSS -->
<!--
<!-- Fonts -->
<!--
--> --> -->
<!-- </head>
<body>

<nav class="navbar nav navbar-default" role="navigation">
<div style="text-align:center;">
<div class="">
<a href="#"><img src="img/logov2.jpg" width="100%" class="center img-responsive" ></a>

</div>
</div>
<div class="">
<!-- Collect the nav links, forms, and other content for toggling -->
<!-- <div class="">
<div>
<ul class="list-unstyled"> -->
<!-- <li><div class="col-xs-3" style="border-right:1px solid #fdb356; height:30px;"><a href="http://facebook.com/ssuIzmir" onclick="window.open('http://facebook.com/ssuIzmir', '_system', 'location=yes')" target="_blank"><img src="img/facebook.PNG" class="center img-responsive" style="margin-top:5px; max-height:15px;"></a></div></li>
<li><div class="col-xs-3" style="border-right:1px solid #fdb356; height:20px;">
<a href="http://twitter.com/s" onclick="window.open('http://twitter.com/s_su', '_system', 'location=yes')" style="text-decoration:none; "><img src="img/twitter.png" class="center img-responsive" style="margin-top:5px; max-height:15px;"></a>
</div></li>
<li><div class="col-xs-3" style="border-right:1px solid #fdb356; height:20px;">
<a href="https://www.youtube.com/user/ssu" onclick="window.open('http://youtube.com/user/ssu', '_system', 'location=yes')" style="text-decoration:none; "><img src="img/youtube.png" class="center img-responsive" style="margin-top:5px; max-height:15px;"></a>
</div></li>
<li><div class="col-xs-3" style="border-right:1px solid #fdb356; height:20px;">
<a href="http://instagram.com/ssu/" onclick="window.open('http://instagram.com/ssu/', '_system', 'location=yes')" style="text-decoration:none; "><img src="img/instagram.png" class="center img-responsive" style="margin-top:5px; max-height:15px;"></a>
</div></li> -->
<!-- </ul>

</div>

</div>
<!-- /.navbar-collapse -->

<!-- /.container-fluid -->

<!-- <div class="container" >
<div>
<a href="video.html?page=1&playList=PL-s-zXpFNb-cXmAD18"><img src="img/ssr.png" class="center img-responsive" style="position:relative;"></a>
</div>
<div>
<a href="video.html?page=2&playList=PL-s"><img src="img/sstleri.png" class="center img-responsive" alt=""></a>
</div>
<div>
<a href="video.html?page=3&playList=PL-s"><img src="imgs.png" class="center img-responsive" alt=""></a>
</div>
<div>
<a href="video.html?page=4&playList=PL-s"><img src="img/sn.png" class="center img-responsive" alt=""></a>
</div>
<div>
<p class="text-center"><a href="http://www.ssu.com/bs" onclick="cordova.InAppBrowser.open('http://www.ssu.com/bs')" class="center img-responsive" style="color:#fff; text-transform: uppercase;"><font size='1'> <strong>Bağış yapmak için dokunun </strong></font></a></p>
</div>
<br>
</div> -->

<!-- <script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/ind -->ex.js">
<!-- <script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/videoList.js"></script>
<script src="js/videoPlayer.js"></script>
<script type="text/javascript"> --> -->
app.initialize();
<!-- </script>
</body>

</html> --> --> -->
Photo of M.Erkan Çam

M.Erkan Çam

  • 13 Posts
  • 2 Reply Likes

Posted 4 years ago

  • 1
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
1. Remove
- maximum-scale=1,
- minimum-scale=1,
- height=device-height,
- target-densitydpi=device-dpi
from your viewport meta.

2. Make sure that you have the exact correct dimension of the splash screen images for the above mentioned devices! The scaling in iOS depends on them.
Photo of M.Erkan Çam

M.Erkan Çam

  • 13 Posts
  • 2 Reply Likes
I removed all written above but unfortunately problem is not solved
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
It is not easy to see what is real code and what is comment.
In fact, you commented out everything...
Photo of M.Erkan Çam

M.Erkan Çam

  • 13 Posts
  • 2 Reply Likes
You are Right. Here is current Code



<!DOCTYPE html>

<html>

<html lang="tr">

<head>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, target-densitydpi=device-dp, maximum-scale=1.0, user-scalable=no">-->
<meta name="viewport" content="user-scalable=no, initial-scale=1, width=device-width" />
<meta name="description" content="">
<meta name="author" content="">

<title>s s</title>

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!-- Fonts -->
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>

<nav class="navbar nav navbar-default" role="navigation">
<div style="text-align:center;">
<div class="">
<a href="#"><img src="img/logov2.jpg" width="100%" class="center img-responsive" ></a>

</div>
</div>
<div class="">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="">
<div>
<ul class="list-unstyled">
<li><div class="col-xs-3" style="border-right:1px solid #fdb356; height:30px;"><a href="http://facebook.com/ssuIzmir" onclick="window.open('http://facebook.com/ssuIzmir', '_system', 'location=yes')" target="_blank"><img src="img/facebook.PNG" class="center img-responsive" style="margin-top:5px; max-height:15px;"></a></div></li>
<li><div class="col-xs-3" style="border-right:1px solid #fdb356; height:20px;">
<a href="http://twitter.com/s" onclick="window.open('http://twitter.com/s', '_system', 'location=yes')" style="text-decoration:none; "><img src="img/twitter.png" class="center img-responsive" style="margin-top:5px; max-height:15px;"></a>
</div></li>
<li><div class="col-xs-3" style="border-right:1px solid #fdb356; height:20px;">
<a href="http://www.youtube.com/user/ssu" onclick="window.open('http://youtube.com/user/ssu', '_system', 'location=yes')" style="text-decoration:none; "><img src="img/youtube.png" class="center img-responsive" style="margin-top:5px; max-height:15px;"></a>
</div></li>
<li><div class="col-xs-3" style="border-right:1px solid #fdb356; height:20px;">
<a href="http://instagram.com/ssu/" onclick="window.open('http://instagram.com/ssu/', '_system', 'location=yes')" style="text-decoration:none; "><img src="img/instagram.png" class="center img-responsive" style="margin-top:5px; max-height:15px;"></a>
</div></li>
</ul>

</div>

</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container" >
<div>
<a href="video.html?page=1&playList=PL-LCj5c6esszXpFNb-cXmAD18"><img src="img/sser.png" class="center img-responsive" style="position:relative;"></a>
</div>
<div>
<a href="video.html?page=2&playList=PL-LCj5c6etGsssM1fPr9byoma"><img src="img/soseri.png" class="center img-responsive" alt=""></a>
</div>
<div>
<a href="video.html?page=3&playList=PL-LCj5c6sWMssixOGbmVnw"><img src="img/orsk.png" class="center img-responsive" alt=""></a>
</div>
<div>
<a href="video.html?page=4&playList=PL-LCj5c6etssz36AFp7QOoHcD_Bo"><img src="img/cs.png" class="center img-responsive" alt=""></a>
</div>
<div>
<p class="text-center"><a href="http://www.ssu.com/s" onclick="cordova.InAppBrowser.open('http://www.ssu.com/s')" class="center img-responsive" style="color:#fff; text-transform: uppercase;"><font size='1'> <strong>Bağış yapmak için dokunun </strong></font></a></p>
</div>
<br>
</div>

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/videoList.js"></script>
<script src="js/videoPlayer.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>

</html>

Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
That html code is at least valid and has nothing that would make any height dimensions awkward.
Of course, it might be possible that the content including margins exceeds the viewport's height....and yes, that would make the webview be scrollable.

If you want to cut off that contents, you could use the overflow-y CSS attribute on the body element to prevent any scrolling. Be aware of the possible consequences for users of small screens!
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
All yours flag me if you need help. FWIW: bootstrap resets the HTML parameters. I think you know that.
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
@M.Erkan,
Does this article help?

Tutorial: Why html,body height:100% is required for div height:100% to work

If not, what are you trying to do?

Jesse