html - 网站无法在移动 Firefox、移动 iOS 和 Safari 上正常运行

Question

我做了一个简单的个人网站。它似乎在大多数桌面浏览器中运行良好。

但是在移动设备上它无法正常工作。在我的安卓手机上，它在 Chrome 中运行得非常好。但是我有这些问题:

• 在我的 Android 手机上的 Firefox 中，媒体查询似乎不起作用，而且它无法扩展我的网站。
• 在 iPhone 上使用 browserstack 测试网站时，似乎没有浏览器可以正常工作。我的两个页面(关于/技能)之间的转换根本不起作用，缩放也不起作用。
• 最后，当前页面下方的一行(关于/技能)在桌面版 Safari 中似乎有点太高了(也使用 browserstack 进行了测试)。

我能做什么？

Answer 1

尝试将所有宽度和高度转换为百分比，而不是像素。此外，在我的 iPhone 5 上，它加载了。

编辑:在缩小浏览器屏幕时，我注意到没有滚动。

编辑:这里有一些你可以用来调整移动设备大小的东西，但我不太熟悉它，所以如果我错了请告诉我。

@media (min-width: 1100px) {
  body {
    width:50%;
  }
}
@media (max-width: 1100px) {
  body {
    width:40%;
  }
}
@media (max-width: 480px) {
  body {
    width:20%;
  }
}