带位置的居中div：当内容大于视口时，绝对具有Android设备的偏移量

时间：2014-04-07 01:33:08

标签： android html css mobile

当页面上显示以下内容时，问题会出现在Android浏览器上：

  • 一个div元素，其大小大于设备的视口。 （我使用了1200px。）
  • div或left:0; right:0; margin:auto;样式居中的一个或多个其他left:50%; margin-left:-100px元素。

问题在于“居中”div元素实际上并非如此。它们左侧有偏移（如果垂直居中，则为顶部）。这个问题出现在Chrome和Dolphin（WebKit）的Android设备上。它不会出现在桌面上（经过测试的Chrome，FireFox，Safari和IE）。

以下是一些CSS示例：

body{ margin:0; padding:0; }
.wide-element {
    position:absolute;
    height:800px; width:1200px;
    left:50%; margin-left:-600px;
    background:url(1200px-wide.png);
}
.fixed-1, .fixed-2, .absolute-1, .absolute-2 { height:200px; width:200px; }
.fixed-1 {
    position:fixed; margin:auto;
    left:0; right:0; top:0; bottom:0;
    background:rgba(0, 0, 255, .5);
}
.fixed-2 {
    position:fixed; margin:-105px 0 0 -105px;
    left:50%; top:50%; 
    border:5px solid blue;
}
.absolute-1 {
    position:absolute; margin:auto;
    left:0; right:0; top:0; bottom:0;
    background:rgba(255, 0, 0, .5);
}
.absolute-2{
    position:absolute; margin:-105px 0 0 -105px;
    left:50%; top:50%;
    border:5px solid red;
}

HTML：

<body>
    <div class="wide-element"></div>
    <div class="fixed-1"></div>
    <div class="fixed-2"></div>
    <div class="absolute-1"></div>
    <div class="absolute-2"></div>
</body>

我添加了position:fixed对与position:absolute对形成鲜明对比。正如您在下面的屏幕截图中看到的那样，fixed div位于屏幕的实际中心，而absolute div稍微向上并位于布局中心的左侧。最有问题的部分是此偏移会导致屏幕左侧的元素被切断，无法访问。

enter image description here

我想知道为什么（确切地）发生这种情况（为什么只在移动设备上），但真正的问题是：

如果没有Android设备使页面的某些部分无法访问，我如何可靠地将可能比视口大的div元素居中？

1 个答案:

答案 0 :(得分：0)

这是我自己问题的临时答案。

向<meta name="viewport" content="width=1200">部分添加head行似乎会强制浏览器将视口设置为指定的大小。但是，由于这不是一个真正的解决方案，而其他人可能需要一个更灵活的解决方案，我将把它打开以获得更完整的答案。

相关问题
最新问题