我在移动浏览器上显示我的网页时遇到了奇怪的问题。
我有一个水平居中的块，它在桌面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元标记：
<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;。这将使元素在其容器中居中。
最好的方法是设置一个最大宽度，并在屏幕大小足够大时播放边距。
使用背景图像创建一个宽包装（水平居中），并将包装内的内容限制为最大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;
}
}
编辑：
还可以将viewport resetting meta标记添加到html代码的
head-部分：<meta name="viewport" content="width=1224">
编辑2：
创建了一个新的演示（http://codepen.io/anon/pen/dPzJPX）并更新了初始答案。