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

我正在做一个快速移动版本的我的桌面网站在引导和运行到一些格式问题。当我在桌面上展开这个视图时，我的图标会以3×4的网格显示。当我缩小窗口的宽度时，图像网格会相应地缩小到一列，每行12个图像，没有水平的侧栏

但是，当我在手机上查看时，我的导航栏不会“捕捉”到每秒钟可见分辨率的宽度，并允许我侧向滚动-即使图像仍在1列12幅图像中对齐。尽管网站清楚地检测到它是在移动设备上观看的，但导航的行为就像是在桌面上观看而不是在移动设备上观看一样。如果不在手机上看到这一点，在小提琴中复制这一点可能会很困难，但我把小提琴放进去是为了看看是否有人能说出我在说什么

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

*{
  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;
}

很抱歉，我不得不在文章中包含代码来包含fiddle，但是整个索引和CSS都在那里。我添加这一点是为了表明我隐藏了x溢出，希望它能像处理桌面x滚动一样消除移动x滚动

在这里拉小提琴：

同样，它在桌面上看起来不错——但当在移动设备上打开时，这个演示允许在整个屏幕上水平滚动，并且不会在一列中显示图像，下拉菜单只在显示屏上可见，就像我想要的那样

---

谢谢

您尚未在头部设置视口。-这是一个严重的错误

将

添加到头部

您还需要查看媒体查询

将@media screen和（最大宽度：480px）{your styles}和768px添加到css中。（ipad）从那里开始。

你需要

---

这是一个关于移动设备视口的指南

你需要回顾一下，我的猜测是…谢谢：）我已经设置了视口，JSFIDLE只是自动在编译中包含了meta标记，所以我不需要它在头部。接受吗？这解决了问题吗？或者你还在寻求答案吗？不，但我认为你没有把问题列出来是我目前的障碍，这是对的。我的印象是，封装在引导容器中的现有代码可以适当地缩小到媒体设备。我想这就是为什么我很难弄清楚为什么它在浓缩的桌面视图中工作，而不是在我的移动设备上。另外，我也不知道我的标记的哪一部分会导致移动设备上的宽度扩大，因为当我滚动并搜索可能的宽度时，它只是一个空白。我会再为您做一次查看