android - 网站卡在移动设备(android)的左上角

标签 android html css mobile centering

我一直在痛苦地尝试在移动设备 (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

enter image description here

顺便说一句,我试过的 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;
}

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

enter image description here

最佳答案

<罢工> <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 的尺寸

关于android - 网站卡在移动设备(android)的左上角,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19053742/

相关文章:

html - 居中对齐导航栏中的链接?

android - 缩放 Android 小部件

css - 字体大小样式不适用于 jsf selectOneRadio

android - Facebook-Notification like Pullable Screen

html - 导航栏不固定

html - ul 和 li 非固定父级的 100% 高度

javascript - `vertical-align: middle` 没有达到我的预期

CSS:在 Internet Explorer 中压缩列加载

安卓菜单透明

android - 如何实现 onRetainNonConfigurationInstance