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

Question

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

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

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

我正在使用 CDN 托管 Bootstrap 并在我的 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 */
}

希望这对您有所帮助!