Question

我正在使用实现CSS的网站。
较长的条目会在移动设备上显示默认的移动导航菜单。基本上，这些单词将环绕到下一行，并与它下面的单词重叠，显示“ encrypt-o-jumble”。

我去了，并添加了通常这样设置的特定媒体查询。

@media screen and (max-width: 870px) {
  .xp-1 {
    min-height: 100px;
  }
}

我在chrome浏览器中对它们进行了测试，它们的响应速度非常快。

当我在任何类型的电话上查看同一站点时，或者在chrome浏览器电话上查看时，媒体查询都会像在较小的屏幕上一样被激活。平板电脑通常足够大，不会触发媒体查询。

例如：在桌面上375像素处，一行将换行到下面的行。通过媒体查询，该元素将扩展，将其向下推，并为整个链接创建足够的空间。

在375像素iPhone x上查看时，该元素会扩展，但文本会变小，留有空白。

我尝试添加一些不同的元标记：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="viewport" content="width=device-width">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

以下是菜单的屏幕截图： On the iPhone X Chome view (375px):

Regular Chrome browser view at 375px:

此处提供了指向实时网站的链接： https://onesourcebenefits.com/

如何使它在移动设备上的显示与在浏览器中的显示相同？

到目前为止，我已经阅读了本网站上的大量信息，并将继续对此进行研究。任何帮助，将不胜感激。：）

Answer 1

在这种情况下，物化是在li标签内的嵌套标签上强制固定高度，如其移动导航菜单的示例所示。我删除了嵌套的ul和li，并用具有padding和hover属性的div替换了它们。现在该站点可以响应了。

媒体查询不适用于手机，但响应能力适用于台式机

1 个答案: