Question

在访问移动设备时，我无法按比例缩放内容。

在桌面上，该网站看起来像http://imgur.com/a/hhsIb（第一张图片）

我设置了一个媒体查询，使其看起来像这样（第二张图片）

@media only screen and (max-width: 867px) {
#header-wrap{
padding: 0px 0px 0px;
max-height: 100%;
}

.right.nav {
    float: none;
}
.nav{   
}
ul {
display:inline-block;
padding: 0px 10px 0px;
min-width: 300px;
}
.left {
float: none;
}
.logo{
margin:auto

}
}

但在移动设备上查看时，它看起来像桌面（第三张图片）

我也试图让导航从中心移动到中心对齐，一旦它到达查询但我不知道如何这样做。

这里是JS小提琴http://jsfiddle.net/u9shm5af/

Answer 1

您需要将视口元标记添加到文档的<head>部分：

<html>
  <head>
    <title>Robert Fikes</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    ...
  </body>
</html>

没有此标记的移动浏览器会以固定宽度呈现网页内容，因此不会切断没有自适应样式的旧网站。

来自Safari Developer Library：

大多数网页非常适合可见区域，视口宽度设置为纵向980像素，如图3-10所示。如果iOS上的Safari未将视口宽度设置为980像素，则仅显示灰色显示的网页左上角。但是，此默认设置不适用于所有网页，因此如果您的网页不同，则需要使用视口元标记。

媒体查询有问题

1 个答案: