I've got some simple HTML/CSS that I want to roughly fill the browser window height-wise on a portrait-oriented iPhone and iPad. The code I've developed works great on the iPhone, filling it nicely. However, on the iPad it takes up maybe half of the screen. I've tried all kinds of scaling, width, height, etc. settings on the meta viewport tag, but can't find something that works for both.
Is it possible to set it to work on both equally well? I also want it to work well on Android if possible.
Here's the code I'm using:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,
user-scalable=0, target-densitydpi=medium-dpi, maximum-scale=1.0"/>
<style>
.box {
border:0px solid ddd;
text-align:center;
font-size:750%;
font-family:Helvetica;
font-weight:bold;
margin:0 auto;
padding-bottom:10px;
}
.gaptop {
margin-top:10px;
}
</style>
</head>
<body>
<div class="box">+</div>
<div class="box">–</div>
<div class="box gaptop">3</div>
</body>
</html>
See the links below.
1) Designing content for the whole iOS family and
2) Safari Web Content Guide
Hope this may help you.