为什么我的移动设备仍将我的视口视为桌面？

Question

我正在为 bootstrap 和运行中的桌面站点制作一个快速移动版本，以解决一些格式问题。当我在我的桌面上展开这个视图时，我的图标显示在 3 x 4 的网格中就好了。当我缩小 window 的宽度时，图像网格会相应地缩小到 1 列，每行 12 个图像，没有水平侧边栏。

但是，当我在移动设备上查看此内容时，我的导航栏不会 'snap' 显示分辨率的宽度，并允许我横向滚动 - 即使图像仍然对齐1 列 12 张图片。尽管网站清楚地检测到它是在移动设备上查看的，但导航就像是在桌面上而不是在移动设备上查看的一样。如果不在移动设备上看到它，可能很难在 fiddle 中复制它，但我包含了 fiddle 以查看是否有人能说出我在说什么。

/******* 一般 ********/

*{
  box-sizing: border-box;
  margin: 0;
  zoom: 1; 
  font-size: 13px;
}

body{
    background: #f9f9f9 url(../img/crossword.png) repeat top left;
    font-family: 'Open Sans', Tahoma, sans-serif;
    max-width: 100%;
    background-color: #5F5E5E;
    font-size: 13px;
    color: #333;
    overflow-x:hidden;
}

抱歉，我不得不在 post 中包含代码以包含 fiddle，但整个索引和 CSS 都在那里。我添加这个是为了表明我隐藏了 x 溢出，希望能像桌面 x 滚动一样摆脱移动 x 滚动。

Fiddle 这里：

http://jsfiddle.net/09wfonqv/5/

同样，它在桌面上看起来不错 - 但在移动设备上打开时，此演示允许水平滚动，并且不会像我希望的那样在单个列中显示图像，下拉菜单仅在显示器中可见.

谢谢！

Answer 1

您还没有在头部设置视口。 - 这是严重错误！

将<meta name="viewport" content="width=device-width, initial-scale=1">添加到头部。

您还需要研究媒体查询。

将@media screen 和 (max-width:480px) {your styles} 添加到您的 css 768px。 (ipad) 从这里开始。

Answer 2

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

这是有关移动设备视口的指南Using the viewport meta tag to control layout on mobile browsers

为什么我的移动设备仍将我的视口视为桌面？

Why does my mobile device still treat my viewport as a desktop?

html

css

twitter-bootstrap

media-queries