我在移动版 Chrome 上显示我的网页时遇到了奇怪的问题。 我有一个水平居中的 block ，它在桌面版 Chrome 上显示得很好，但在移动版 Chrome 上它粘在页面的左边框上。
经过一番研究后，我意识到存在与屏幕尺寸不同的移动“视口(viewport)”。 因此，让某些东西居中并不是一件简单的事情。
我使用的简化标记:
<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;
}
我也试过使用以下方法使 block 居中:
left: 50%;
margin-left: -512px;
position: absolute;
但那有同样的效果。 我也尝试添加视口(viewport)元标记:
<meta name="viewport" content="width=device-width, initial-scale=1">
这也无济于事。 我的设备有 1920x1080 的硬件分辨率，它显示的页面实际宽度约为 1200 像素，但默认情况下“设备宽度”为 640 像素，如果我使用多点触控缩放页面，它仍将左边框保持在初始位置。
对我来说，最好的目标是将页面固定在某个分辨率(1200 像素就可以了，我的任务不需要缩放)并且 block 居中。但是我看不到将“设备宽度”设置为真实硬件像素大小并锁定缩放比例的方法……(我知道如何锁定缩放比例，但它对分辨率和居中没有帮助)。
可以轻松复制的页面示例:http://37.48.93.204/androidtest.htm
它在桌面 Chrome 上运行良好，但在 Android Chrome 上描述了问题。
最佳答案
假设您在谈论水平居中:
在容器中居中的最简单方法是给它一个固定的宽度，然后使用 margin-left: auto; 和 margin-right: auto;。这将使元素在其容器中居中。
最好的方法是设置最大宽度，并在屏幕尺寸足够大时立即调整边距。
使用背景图像创建一个宽包装器(水平居中)并将该包装器内的内容限制为最大 1024 像素。然后在屏幕窄于 1024 像素时调整大小。
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;
}
}
编辑:
同时将视口(viewport)重置元标记添加到 HTML 代码的 head 部分:
<meta name="viewport" content="width=1224">
编辑 2:
创建了一个新的演示 (http://codepen.io/anon/pen/dPzJPX) 并更新了初始答案。
关于android - android chrome 上的居中 block ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28023892/