1

我的网站是一个以页面为中心的 540x500 像素的小盒子。iPhone 和 Blackberry 都在切断顶部的内容。我把它完全集中在页面上。我一直在搞乱元视口设置，希望能在其他设备上处理页面的边距并有一些运气，但归根结底，我找不到结合我的两行代码的解决方案。

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

我需要帮助！

一、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-->
4

2 回答 2

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;
    }
  }
于 2011-06-10T08:26:18.023 回答
0

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

我发现移动内容在以线性、自上而下的方式放置时效果最佳。

如果这是div页面上唯一的，使用移动样式表去除定位，只保留width,height和一些更小、更简单margins的 .

然后使用类似的东西<meta name="viewport" content="width=580">，只设置width.

这在过去对我有用。

于 2011-06-09T20:02:34.790 回答