让内容在 iOS 上流畅运行

Question

我的网站是一个位于页面中心的 540x500 像素小框。 iPhone和黑莓都在砍掉顶部的内容。我把它绝对放在页面中央。我一直在搞乱元视口设置，希望能够在其他设备上处理页面的边距，并且运气不错，但归根结底，我找不到结合我的两行代码的解决方案。

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

我需要帮助！

一、HTML

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

CSS

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

Meta设置

<!--<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 建议在视口设置中声明任何低于 980 像素的页面的宽度。
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。

这在过去对我有用。