网站卡在移动设备的左上角（android）答案

【问题标题】：Site stuck to top-left corner in mobile (android)网站卡在移动设备的左上角（android）
【发布时间】：2013-10-03 22:14:52
【问题描述】：

我一直在痛苦地尝试在移动设备（Andropid OS ICS 4.2.2）中将网站居中对齐，但它仍然卡在屏幕的左上角，略微被剪裁。我只尝试了 jQuery 和 CSS ......结果相同。在台式电脑上工作正常。

这就是我现在拥有的 - HTML：

<body>
  <div id="wrapper">
    ...
  </div>
</body>

CSS：

body {
  overflow: hidden;
}

#wrapper {
  z-index: 1;
  width: 1370px; height: 910px;
  position: absolute;
  top: 50%;
  margin-top: -455px; /* half of #wrapper height */
  left: 50%;
  margin-left: -685px; /* half of #wrapper width */
}

在线结果：link

顺便说一下，我试过的jQuery是这样的：

$(window).resize(function(){
  $('#wrapper').css({
    left: ($(window).width() - $('#wrapper').outerWidth())/2,
    top: ($(window).height() - $('#wrapper').outerHeight())/2
    });
});

$(window).resize(); // To initially run the function

有什么想法吗？

>>>>> 更新 1 - @Moob 建议

#wrapper {
    z-index: 1;
    position: absolute;
    width: 1370px; height: 910px;
    top: 0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}

仍然裁剪顶部，但不裁剪左侧。不居中。

【问题讨论】：

$(document).ready(function () { code });里面有上面的代码吗？
它在 $(document).ready() 的外部文件中，是的。
CSS 尺寸不需要单位吗？即px?

标签： android html css mobile centering

【解决方案1】：

~~<div id="wrapper">... 不能用</wrapper> 关闭。你必须关闭</div>~~

您可以尝试像这样将元素居中：

#wrapper {
    z-index: 1;
    position: absolute;
    width: 1370px; height: 910px;
    top: 0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}

Demo of centred div

...但我怀疑手机的分辨率小于你#wrapper的尺寸

【讨论】：

它用
正确关闭 - 我的错误。

我已经采用了你的 CSS 并且它变得更好了。它不再夹在左侧，但仍保留在顶部且未居中。至于手机的分辨率，必须有办法适应屏幕大小。我将添加它的外观图片。

添加手机截图。