css - Bootstrap 使 iPhone 缩放与 iPad 相同。

Question

我的网站在 iPad 版本上崩溃得很好，但一旦它在 iPhone 上崩溃，它就会变得一团糟。我宁愿只保留 iPhone 的 iPad 版本。

我知道我必须覆盖/* Landscape phones and down */ @media (max-width: 480px) { ... }

但我必须覆盖每个单独的参数吗？我不能简单地告诉它“不要在 768 像素以下折叠”

我正在使用 CDN 托管的引导程序并在我的 css 中进行自定义覆盖。

Answer 1

这是建议的媒体：

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  /* Styles */
}

如您所见，这里我使用device-width的是width.

如果您想要在 iPad 和 iPhone 中使用相同的样式并且在 480px 和 768px 之间没有约束，您可以简单地：

@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
  /* Styles */
}

希望这可以帮助！