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

Question

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

do you know Javascript? you need to use javascript to hide the content depending on the orientation — Sufendy, Jun 14 '11 at 09:17
I'm not familiar with using Javascript to hide content in web pages — Jack Tyler, Jun 14 '11 at 09:22
the question that you linked is using Javascript. That's probably why you are struggling. — Sufendy, Jun 14 '11 at 09:31

score 7 · Accepted Answer · answered Jun 14 '11 at 10:02

7

use @media

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

Don't abuse javascript when CSS can do it.

orientation

answered Jun 14 '11 at 10:02

Raynos

166,823
56
351
396

Sufendy · Answer 2 · 2011-06-14T09:55:01.523

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>

@Raynos ow didn't know ... I normally just put `` haha.. thanks — Sufendy, Jun 14 '11 at 09:56
Don't use JavaScript when you can just use `@media` queries. — Raynos, Jun 14 '11 at 10:03

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

2 Answers2