您是否可以在Safari中更改在iOS中更改方向時顯示的內容？

我有一個手機網站，目前顯示一個時間表。然而，非移動網站也有一個iFrame，裏面有谷歌地圖，可以顯示多輛正在跟蹤的車輛。您是否可以在Safari中更改在iOS中更改方向時顯示的內容？

對於移動網站，我只想要時間表以縱向顯示，只顯示橫向顯示的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; 
}

來源

2011-06-14 Jack Tyler

你知道嗎？你需要使用JavaScript來隱藏取決於方向的內容 – Sufendy 2011-06-14 09:17:38

我不熟悉使用Javascript來隱藏網頁中的內容 – 2011-06-14 09:22:27

您鏈接的問題是使用Javascript。這可能是你爲什麼掙扎的原因。 – Sufendy 2011-06-14 09:31:57

使用@media

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

不要濫用Javascript時，CSS可以做到這一點。

orientation

來源

2011-06-14 10:02:59 Raynos

首先你需要分配的ID給您的時間表容器和iframe。然後，使用下面的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>

來源

2011-06-14 09:47:07 Sufendy

'語言'已棄用。使用'type =「text/javascript」' – Raynos 2011-06-14 09:54:02

@Raynos ow不知道...我通常只是把＃'哈哈..謝謝 – Sufendy 2011-06-14 09:56:44

嗨Phelios，這很棒！非常感謝您的幫助。 – 2011-06-14 09:57:55

您是否可以在Safari中更改在iOS中更改方向時顯示的內容？

回答

相關問題