Question

我的网站很好地崩溃了iPad版本，但一旦它崩溃为iPhone，这是一个烂摊子。我更喜欢保留iPhone的iPad版本。

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

但是我必须覆盖每个单独的参数吗？我不能简单地告诉它“不要在768px以下崩溃”

我正在使用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 */
}

希望这有帮助！

Bootstrap使iPhone缩放与iPad相同。

1 个答案: