css - 网站在水平 iPhone 方向上未正确居中

Question

我使用 CSS 将我的网站垂直居中，但是当它在 iPhone 上以水平模式查看时，该网站被截断并且没有居中。我该如何解决这个问题？

这是我用来使网站居中的 css:

#wrapper {
width:850px;
height:650px;

position:absolute;
top:50%;
margin-top:-325px;
left:50%;
margin-left:-425px;
}

这是网站: http://www.maidmarianmuffins.com/

我需要结果具有完整的功能，即缩放和捏合功能必须仍然有效。 :)

Answer 1

我会将 #wrapper 属性从您必须的更改为

#wrapper {
    height: 650px;
    margin: 5% auto 0;
    position: static;
    width: 850px;
}

每个元素默认的静态定位，不包含也没问题。边距值5%表示距离顶部的边距，左右为auto，底部为0。

我做了一个活生生的例子，你可以在你的 iPhone 上找到并测试它:http://jsbin.com/adino3/3