Can you change what is displayed when orientation is changed in safari for iOS?

I have a mobile website, which currently displays a timetable. The non-mobile site however also has a iFrame with google maps inside it, to display multiple vehicles being tracked.

For the mobile site, I want only the timetable to display in portrait and only t开发者_运维知识库he iframe to display in landscape.

I've seen this Can I trigger a CSS event in mobile safari upon iphone orientation change? , but I struggle to see how I can apply this to my query.

This is the CSS for the iFrame:

.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;
}

use @media

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

Don't abuse javascript when CSS can do it.

orientation

First you will need to assign ID to your timetable container and iFrame. Then, use the javascript below to hide or display it. I will assume that your iFrame id is 'map' and your timetable container is '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>