我有一些简单的HTML / CSS,我想在纵向的iPhone和iPad上大致填充浏览器窗口的高度。我开发的代码在iPhone上效果很好,很好地填充了代码。但是,在iPad上,它可能占据屏幕的一半。我已经尝试过在meta viewport标记上进行各种缩放,宽度,高度等设置,但是找不到对两者都适用的内容。

是否可以将其设置为在两个方面均能很好地工作?如果可能的话,我也希望它能在Android上正常运行。

这是我正在使用的代码:

<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">&ndash;</div>
    <div class="box gaptop">3</div>
  </body>

</html>

最佳答案

请参阅下面的链接。

1)Designing content for the whole iOS family

2)Safari Web Content Guide

希望这对您有所帮助。

10-07 12:12