Можете ли вы изменить то, что отображается при смене ориентации в Safari для iOS?

Question

У меня есть мобильный веб-сайт, на котором в настоящее время отображается расписание.Однако на немобильном сайте также есть iFrame с картами Google внутри, чтобы отображать отслеживание нескольких транспортных средств.

Для мобильного сайта я хочу, чтобы только портрет отображался в портретной ориентации, и только iframe -landscape.

Я видел это Могу ли я вызвать событие CSS в мобильном сафари при изменении ориентации iphone? , но я не могу понять, как применить это к своему запросу.

Это CSS для 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

используйте @media

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

Не злоупотребляйте JavaScript, если CSS может это сделать.

orientation

Answer 2

Сначала вам нужно будет присвоить идентификатор вашему контейнеру расписания и iFrame. Затем используйте JavaScript ниже, чтобы скрыть или отобразить его. Я предполагаю, что ваш идентификатор iFrame равен '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>