Javascript: изменение свойств, если экран включен, не работает на Samsung. Идеи, как это исправить? - PullRequest
Новая
       7

Javascript: изменение свойств, если экран включен, не работает на Samsung. Идеи, как это исправить?

0 голосов
/ 06 ноября 2018

Хо, ребята, у меня есть этот маленький код, который меняет мою ширину, если я поворачиваю свой телефон. 

window.addEventListener("orientationchange", function() {

  if (window.matchMedia("(orientation: portrait)").matches) {

document.getElementById("iframe-startpage-mobile").style.width ="90%";
document.getElementById("iframe-startpage-mobile").style.marginLeft ="5%";
    } else {
        document.getElementById("iframe-startpage-mobile").style.width ="100%";
        document.getElementById("iframe-startpage-mobile").style.marginLeft ="0%";
    }

  }, false);

Он отлично работает на моем Android Xiaomi Redmi Note 4 (работает в Chrome и Firefox), но не работает на моем Samsung Galaxy S8 (не в браузере Chrome или Samsung). Любая идея, как я могу это исправить?

Ответы [ 2 ]

0 голосов
/ 20 ноября 2018

Я использую WordPress, и на моем Samsung Galaxy в ландшафтном режиме WordPress (я использую шаблон Avada Fusion) думаю, что экран галактики является средним экраном. Так что я просто переключаю контейнер на средний экран, и теперь он работает :) Проблема была в том, что моя галактика показала мне контейнер для декстопа, у которого есть другой идентификатор, так что я ничего не произнес, но это было не так, просто не случилось на моем мобильном -контейнер. Я просто изменил # iframe-startpage-mobile на # iframe-startpage исправлены ошибки. Спасибо за внимание: D

0 голосов
/ 07 ноября 2018

Что именно не так? Событие orientationchange не запускается или запрос matchMedia возвращает неверный результат?

У меня нет шансов протестировать на телефоне Samsung, но есть некоторые обходные пути:

orientationchange

Вы можете заменить его на window.onresize. Только будьте осторожны, чтобы не выполнять тяжелую работу с этим обработчиком (или, по крайней мере, применить к нему что-то вроде debounce ), он вызывается постоянно при изменении размера.

matchMedia

Вы можете достичь аналогичных результатов с помощью чего-то вроде: 

function is_landscape() {
   return (window.innerWidth > window.innerHeight);
}
...