Скрытие элементов dom при изменении ориентации устройства?

При изменении ориентации на мобильном устройстве (нижний / средний уровень), например, stackoverflow открыт в браузере, заметная белая область видна в течение небольшого периода времени. См. Гифку ниже.

device orientation white area

Чтобы воспроизвести для себя, откройте stackoverflow.com или любой сайт с приличным количеством элементов DOM в Chrome. Нажмите f12, нажмите ctrl + shift + m (чтобы открыть панель инструментов устройства), выберите устройство и измените Online на, например, Mid-tier mobile, затем вы можете наблюдать белую область, просто нажав кнопку rotate.

Конечно, основная причина - это количество присутствующих элементов DOM (как таковых они не должны находиться в области просмотра). Если бы вы должны были выполнить те же действия, что описаны выше, скажем, на странице этого вопроса, лаг / белую область трудно заметить.

Решением было бы скрыть те контейнеры, которые содержат много элементов DOM, и, чтобы еще больше повысить производительность, скрыть те элементы, которые выпадают из области просмотра (с заданной безопасной областью).

Но, к сожалению, не существует таких вещей, как ondeviceorientationStart и ondeviceorientationEnd, или медиа-запросов, которые можно было бы использовать ... Итак, вопрос в том, есть ли крючок / метод скрытия элементов в течение изменение ориентации?

РЕДАКТИРОВАТЬ:, как и предполагалось, событие resize - это то, с чего мы все должны начать. Однако это событие происходит поздно. Если мы продолжим использовать сайт stackoverflow и должны были скрыть все элементы, эти элементы будут скрыты после, изменение ориентации произошло. Фрагмент:

window.addEventListener("resize", function() {
  var els = document.querySelectorAll(".-summary"),
    i = 0,
    l = els.length;

  for (i; i < l; i++) {
    els[i].style.display = "none";
  }
});

Что насчет window.onresize

Chris G 11.04.2018 12:15

Плюс if (window.innerWidth > window.innerHeight) portrait().

deEr. 11.04.2018 12:16

Вы действительно скучающий программист? :) Как @ChrisG говорит, что onresize даст вам то, что вы хотите, но вы можете поместить туда какой-нибудь debounce для хорошей меры.

Keith 11.04.2018 12:18

Обновил вопрос с предложенным resize, должен был добавить это изначально, моя проблема.

Dalie 11.04.2018 14:35
0
4
76
1

Ответы 1

У вас есть этот вариант с медиа-запросом css:

@media screen and (min-width: 300px) and (orientation: landscape) { }

@media (min-height: 680px), screen and (orientation: portrait) { }

С помощью этих медиа-запросов вы можете контролировать состояние landscape и portrait. Но, как следует из вопроса, я ищу способ контролировать то, что видно, а не в течение - изменение ориентации.

Dalie 11.04.2018 14:43

Это будет зависеть от скорости интернета, оборудования телефона и т. Д. На мой взгляд, вы должны сконцентрироваться на оптимизации в целом, и это решит проблемы повторного рендеринга, такие как ориентация переключателя. Обычный пользователь примет задержку в 1,5 секунды. Сделайте профессиональные тесты памяти и вы решите эту проблему.

Carnaru Valentin 11.04.2018 14:49

Боюсь, что после некоторых дальнейших экспериментов мне действительно нужно остановиться на этой белой области, одна оптимизация, которую я обнаружил, заключалась в снижении контраста, поэтому белый цвет не так сильно выделяется.

Dalie 11.04.2018 15:01

Опять же, используйте инструмент, чтобы увидеть трафик. Это покажет вам, если вы потеряете пользователей из-за проблем с производительностью. Кроме того, я думаю, что белый цвет от тела, вы можете попробовать изменить этот цвет, если считаете, что это будет лучше для UX.

Carnaru Valentin 11.04.2018 15:05

Другие вопросы по теме