为什么我的导航菜单在 Windows 和 Mac 计算机上可以以任何页面大小工作，但在 iPad 和 Android 手机上却不能？

Question

我为某人制作了一个网站。通用代码可能会令人失望，但它是这样完成的，因为它必须适用于一些利基的遗留技术。

无论如何，它运行得很好，只是我们发现了菜单的问题。您可以在 Windows 或 MacOS 台式计算机上拖动窗口并调整其大小，它会根据需要工作，当窗口变得足够小时，会切换到无处不在的三栏移动菜单。然而，它在我的 iPad 或 Android 手机上根本不起作用。这种导航对我来说是新的，因为我已经脱离 Web 开发多年，所以我可能会错过一些明显可笑的东西。

有什么想法吗？

开发站点位于：http://rcomp.michaelstubbs.uk

CSS 在此文件中：

https://rcomp.michaelstubbs.uk/stylesheet.css

每个页面包含的导航代码位于此文本文件中：

https://rcomp.michaelstubbs.uk/titlebar.txt

我本来打算只粘贴相关代码，但我突然想到，也许有些东西我认为不相关，但确实相关，所以只需链接到文件即可。

Answer 1

从您的代码来看，CSS 响应功能停止于 (720px)。将最大宽度目标为 720 像素意味着响应能力仅适用于低于 720 像素的屏幕尺寸，而不能高于 720 像素，如果您希望响应能力在 iPad 上运行，请将最大宽度尺寸增加到 iPad 尺寸（768 像素）或更大。

  @media screen and (max-width: 768px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
  position: absolute;
  right: 0;
  top: 0;
}}