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

Answer 1

use @media

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

Don’t abuse javascript when CSS can do it.

orientation