iphone - 您可以更改在 iOS 的 safari 中更改方向时显示的内容吗？

Question

我有一个移动网站，目前显示的是时间表。然而，非移动网站也有一个内置谷歌地图的 iFrame，用于显示多辆被跟踪的车辆。

对于移动网站，我只希望时间表以纵向显示，而只有 iframe 以横向显示。

我看过这个Can I trigger a CSS event in mobile safari upon iphone orientation change? ，但我很难了解如何将其应用到我的查询中。

这是 iFrame 的 CSS:

.map {
-moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background-color: #fff;
  color: #000;
  width: 600px;
  height: 500px;
  margin-left: 20px;
  margin-right: auto;
  overflow: hidden;
  -moz-box-shadow: inset 0 0 5px #888;
  -webkit-box-shadow: inset 0 0 5px #888;
  box-shadow: inner 0 0 5px #888;
  float: left;
}

Answer 1

使用@media

@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }

当 CSS 可以做到时，不要滥用 javascript。

orientation