在 iOS 的 Safari 中更改方向时，您可以更改显示的内容吗？答案

【问题标题】：Can you change what is displayed when orientation is changed in safari for iOS?在 iOS 的 Safari 中更改方向时，您可以更改显示的内容吗？
【发布时间】：2011-06-14 09:11:27
【问题描述】：

我有一个移动网站，目前显示时间表。然而，非移动网站也有一个 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;
}

【问题讨论】：

你懂Javascript吗？您需要使用 javascript 根据方向隐藏内容
我不熟悉使用Javascript隐藏网页中的内容
您链接的问题是使用 Javascript。这可能就是你苦苦挣扎的原因。

标签： iphone css ios safari

【解决方案1】：

使用@media

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

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

orientation

【讨论】：

【解决方案2】：

首先，您需要为时间表容器和 iFrame 分配 ID。然后，使用下面的 javascript 隐藏或显示它。我假设你的 iFrame id 是 'map' 并且你的时间表容器是 'timetable'

<script type="text/javascript">
var timetable = document.getElementById('timetable');
var map = document.getElementById('map').

window.onorientationchange = function() {
    switch(window.orientation) {
        case 0:   // Portrait
        case 180: // Upside-down Portrait
            // Javascript to setup Portrait view
            timetable.style.display = 'none';
            map.style.display = 'block';
            break;
        case -90: // Landscape: turned 90 degrees counter-clockwise
        case 90:  // Landscape: turned 90 degrees clockwise
            // Javascript to steup Landscape view
            timetable.style.display = 'none';
            map.style.display = 'block';
            break;
    }
}
</script>

【讨论】：

language 已弃用。使用type="text/javascript"
@Raynos 哦不知道...我通常只是输入<script></script>哈哈...谢谢
当你可以使用 @media 查询时不要使用 JavaScript。