Javascript：在屏幕打开时更改属性在三星上不起作用。想法如何解决？

Question

伙计们，我有这个小代码，如果我旋转 phone，它会改变我的宽度。

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 小米红米 Note 4 上运行完美（在 chrome 和 firefox 上运行）但在我的三星 Galaxy S8 上无法运行（不适用于 chrome 或 samsung浏览器）。知道我该如何解决吗？

Answer 1

到底哪里出了问题？是 orientationchange 事件未触发，还是 matchMedia 查询 returns 错误结果？

我没有机会在三星 phone 上进行测试，但有一些通用的解决方法：

方向改变

您可以将其替换为window.onresize。请注意不要在该处理程序上做繁重的工作（或者至少对其应用 debounce 之类的东西），它会在调整大小时不断调用。

匹配媒体

您可以通过以下方式获得类似的结果：

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

Answer 2

我在横向模式下使用 wordpress 和我的 samsung galaxy wordpress（我使用 avada fusion 模板）认为 galaxy 屏幕是中等屏幕。所以我也只是在中等屏幕上切换容器，现在它可以工作了:)问题是我的星系向我展示了 dekstop 的容器，它有另一个 ID，所以我以为我什么都没发生，但这是错误的，它只是没有发生在我的手机上-容器。我只是将#iframe-startpage-mobile 更改为#iframe-startpage evethings fixed。谢谢大家的关注 :D

Javascript：在屏幕打开时更改属性在三星上不起作用。想法如何解决？

Javascript: Changing properties if screen is turned do not work on Samsung. Ideas how to fix that?

javascript

android

screen-orientation

samsung-mobile

方向改变

匹配媒体