mep*_*123 5 html css android google-chrome center
我在移动 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;
但这具有相同的效果。我也试过添加视口元标记：
<meta name="viewport" content="width=device-width, initial-scale=1">
它也无济于事。我的设备具有 1920x1080 的硬件分辨率，它确实显示实际宽度约为 1200 像素左右的页面，但“设备宽度”默认为 640 像素，如果我使用多点触控缩放页面，它仍将左边框保留在初始位置。
对我来说，最好的目标是将页面固定在某个分辨率（1200 像素就可以了，我的任务不需要缩放）并且块居中。但是我没有看到将“设备宽度”设置为真实硬件像素大小并锁定缩放的方法......（我知道如何锁定缩放，但它对分辨率和居中没有帮助）。
可以轻松复制的页面示例：http: //37.48.93.204/androidtest.htm
它在桌面 Chrome 上运行良好，但在 Android Chrome 上描述了问题。
假设您正在谈论水平居中：
将某些内容在其容器内居中的最简单方法是为其指定固定宽度，然后使用margin-left: auto;和margin-right: auto;。这将使元素在其容器内居中。
最好的方法是设置最大宽度，并在屏幕尺寸足够大时立即使用边距。
使用背景图像（水平居中）创建一个宽包装，并将该包装内的内容限制为最大 1024 像素。然后当屏幕窄于 1024px 时让它调整大小。
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;
}
}
编辑：
还将视口重置元标记添加到headHTML 代码的 - 部分：
<meta name="viewport" content="width=1224">
编辑2：
创建了一个新的演示（http://codepen.io/anon/pen/dPzJPX）并更新了最初的答案。