Javascript:如果屏幕打开则更改属性在三星上不起作用。想法如何解决这个问题？

Question

大家好，我有这个小代码，如果我旋转手机，它会改变我的宽度。

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 或三星浏览器)。知道我该如何解决这个问题吗？

Answer 1

到底出了什么问题？ orientationchange 事件是否未触发，或者 matchMedia 查询返回了错误的结果？

我没有机会在三星手机上进行测试，但有一些一般的解决方法:

方向改变

您可以将其替换为window.onresize。只是要小心，不要在该处理程序上做繁重的工作(或者至少对其应用诸如去抖之类的东西)，它在调整大小时会不断被调用。

匹配媒体

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

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