android chrome上的中心块

2023年4月28日 225次阅读

我在移动Chrome上显示我的网页时遇到了奇怪的问题.

我有一个水平居中的块,它在桌面Chrome上显示得很好,但在移动Chrome上它会粘在页面的左边框上.

经过一番研究后,我意识到移动“视口”与屏幕尺寸不同.
因此,将某些事物集中在一起并不是一项简单的任务.

我正在使用的简化标记：

<body>
    <div class="block">
    </div>
</body>

而CSS：

body {
    width: 100%;
    margin: 0;
}
.block {
    position: relative;
    width: 1024px;
    height: 768px;
    background-color: red;
    top: 44px;
    margin: auto;
}

我也尝试使用以下方法对块进行居中：

left: 50%;
margin-left: -512px;
position: absolute;

但这有同样的效果.
我也尝试添加viewport metatag：

<meta name="viewport" content="width=device-width, initial-scale=1">

它也没有帮助.
我的设备具有1920×1080硬件分辨率,它显示的页面实际宽度约为1200px左右,但“设备宽度”默认为640px,如果我使用多点触控缩放页面,它仍然保持左边框位于初始位置.

对我来说,最好的目标是将页面固定在某个分辨率上(1200px很好,我的任务不需要缩放)和要居中的块.但我没有看到将“设备宽度”设置为真实硬件像素大小并锁定缩放的方法……(我知道如何锁定缩放,但它对分辨率和居中没有帮助).

可以轻松复制的页面示例：http://37.48.93.204/androidtest.htm

它适用于桌面Chrome,但在Android Chrome上描述了问题.

最佳答案 假设你在谈论水平居中：

将容器中的东西对中的最简单方法是给它一个固定的宽度,然后使用margin-left：auto;和margin-right：auto;.这会将元素置于其容器中心.

最好的方法是在屏幕尺寸足够大时设置最大宽度并使用边距播放.

使用背景图像(水平居中)创建一个宽的包装器,并将该包装器内的内容限制为最大1024px.然后在屏幕缩小到1024px时调整大小.

DEMO

HTML代码示例

<html>
  <head>
    <meta name="viewport" content="width=1224">
  </head>
  <body>
    <div class="mainblock">
      <div class="topside">
        Top
      </div>
      <div class="content-wrapper">
        <div class="content">
          Content
        </div>
      </div>
      <div class="bottomside">
        Bottom
      </div>
    </div>
  </body>
</html>

CSS代码示例

body {
  width: 100%;
  margin: 0;
}

.mainblock {
  max-width: 1024px;
  width: 100%;
  height: 768px;
  margin: 0 auto;
}

.content-wrapper {
  background: url('http://lorempixel.com/1224/768/') no-repeat 50% 0;
  display: block;
  position: relative;
  max-width: 1024px;
  padding: 0;
}

.content {
  background: salmon;
  box-sizing: border-box;
  min-height: 768px;
  padding: 0;
  max-width: 1024px;
  width: 100%;
}

.topside,
.bottomside {
  max-width: 1024px;
  height: 50px;
  background-color: blue;
  margin: 0 auto;
}

@media only screen and (min-width: 1024px) {
  .mainblock, .content-wrapper {
    max-width: 1224px;
  }

  .content {
    margin: 0 auto;
    width: 1024px;
    position: relative;
    z-index: 2;
  }

}

编辑：

还要将视口重置元标记添加到HTML代码的开头部分：

<meta name="viewport" content="width=1224">

编辑2：

创建了一个新的演示(http://codepen.io/anon/pen/dPzJPX)并更新了初始答案.

点赞