Question

我正在使用bootstrap快速移动版本的桌面版网站并遇到一些格式问题。当我在桌面上展开此视图时，我的图标显示为3 x 4网格就好了。当我缩小窗口的宽度时，图像网格相应地起作用并缩小到1列，每行12个图像，没有水平边栏。

然而，当我在手机上查看时，我的导航栏并没有“按下”。到每个说明的可见分辨率的宽度，并允许我侧滚动 - 即使图像仍然在12列图像的1列中对齐。尽管该网站明确检测到它正在移动设备上观看，但导航的行为就好像是在桌面上而不是在移动设备上查看。如果没有在移动设备上看到这一点，可能很难将其复制到一个小提琴中，但我包括小提琴，看看是否有人能说出我在说什么。

/ ******* ******** GENERAL /

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

抱歉，我必须在帖子中包含代码以包含小提琴，但整个索引和CSS都在那里。我添加了这个以表明我隐藏x溢出，希望能够像移动桌面x滚动一样摆脱移动x滚动。

小提琴：

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

同样，它在桌面上看起来很好 - 但是当在移动设备上打开时，这个演示允许整个水平滚动，并且不会在单个列中显示图像，下拉菜单仅在我想要的显示中可见

谢谢！

Answer 1

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

以下是移动设备Using the viewport meta tag to control layout on mobile browsers

的视口指南

Answer 2

您还没有将视口设置在头部。 - 那是一个严重的错误！

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

您还需要查看媒体查询。

将@media屏幕和（max-width：480px）{your styles}添加到你的css中768px相同。（ipad）从那里开始。

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

2 个答案: