Question

我的网站是一个以页面为中心的小型540x500px框。 iPhone和Blackberry都在切断内容的顶端。我把它完全集中在页面上。我一直在搞乱元视口设置，希望能够在其他设备上处理页面的边距并且有一些运气，但是当它归结为它时，我找不到一个结合了我的两行代码的解决方案。 / p>

我的代码在下面..我已经探索了媒体查询，将元设置为设备宽度（切断边距）和许多其他选项。老实说，我知道自己很挑剔，而且我花了很多时间在这上面。

我需要帮助！

首先是HTML

<div id="container">content</div>

CSS

#container {
    width:540px;
    height:500px;
    top:50%;
    left:50%;
    margin:-250px 0 0 -270px;
    position:absolute;
}

元设置

<!--<meta name="viewport" content="width=device-width, initial-scale=1">
    cuts off top of content-->
<!--<meta name="viewport" content="width=580, height=540">
    works for iPhone-->
<!--<meta name="viewport" content="width=540, height=500">
    works for iPad-->

Answer 1

Apple建议在视口设置中以宽度声明任何低于980px的页面。 http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html

使用媒体查询调整移动使用的负边距。 1024px是iPad上的最大分辨率..它涵盖了大多数平板电脑。

HTML标题

<meta name="viewport" content="width=500">

CSS标题

  @media only screen 
  and (max-device-width:1024px) {
    #container {
      width:500px;
      height:500px;
      top:0;
      left:0;
      margin:0 auto;
      position:static;
    }
  }

Answer 2

看起来你的负上边距正在切断内容。

我发现移动内容以线性，自上而下的方式运行时效果最佳。

如果这是页面上唯一的div，请使用移动样式表去除定位，仅保留width，height，以及更小，更简单的{{1} }}

然后使用margins之类的内容，仅设置<meta name="viewport" content="width=580">。

这对我来说过去很有用。

获取内容在iOS上玩得很好

2 个答案: