数据过滤器无法在移动设备或平板电脑尺寸中正确显示标签

Question

这是我的第一篇文章，所以请你好。我一直在努力让这个数据过滤器在移动和平板电脑格式下正常工作。

themovingpicture org au / archive（抱歉无法发布超过2个链接和图片，这对解释问题非常重要）

桌面上的一切看起来都很完美，并且在Chrome中调整大小，一切都保持不变，标签出现在移动设备上，当我点击时，我得到的是灰色块。我已经确定移动设备上出现的灰色块位于layout.css

中

.portfolio-wrapper {
  overflow:hidden;
  position: relative !important;
  background: #666;
  cursor:pointer;
}

#filters li span {
  display: block;
  padding:5px 20px;   
  text-decoration:none;
  color:#666;
  cursor: pointer;
}

我最初从这里得到了代码：

创建一个简单的响应式投资组合页面，其中包含过滤和悬停效果。

我尝试删除和编辑CSS的部分（例如删除媒体查询，删除normal.css等），但却无法弄清楚如何使其在移动设备和平板电脑上以与在桌面上相同的方式显示。

我附上了两张图片，显示Chrome中桌面上显示的代码与iPhone 6上的Safari显示相同

Answer 1

这似乎是一个屏幕尺寸问题，因为iPhone6拥有一个更大的屏幕然后你的桌面和浏览器上的测试认为是平板电脑屏幕。此外，看起来您已将标签设置在某个媒体查询块中。

您可以通过使标签格式化为全局（不在媒体查询块内）并更改媒体查询值来使您的小屏幕比您的额外小屏幕更大，来解决此问题。

例：

/*Bootstrap's default small screen minimum size*/
@media (min-width: 655px) {
...
}

您可以更改此值，使平板电脑被识别为普通智能手机。

/*Value changed*/
@media (min-width: 820px) {
...
}