javascript - 使用 JS 更改手机旋转的变量

Question

我已经通过 Google 搜索并研究了如何做到这一点，但还没有成功。我声明了一个名为 width 的变量。我想让我的JS检查，如果屏幕的宽度小于660px，那么宽度应为140px，否则应为100px。变量宽度应该只在我旋转设备“电话”时改变，但它不起作用？我希望每当我旋转设备时变量都应该检查屏幕的宽度。

JS

var width = 0;
   function check()
   {

if (window.innerWidth < 660) 
  {
     width = 140;
  }
  else{
    width = 100;
  }
}


window.addEventListener("orientationEvent", check);
document.write(width);

Answer 1

您想要更改...实际屏幕 View (D.O.M. 中的特定元素)的大小？

乍一看你的代码，在不知道你想要改变大小的具体内容的情况下，我会说你不应该使用 Javascript。您应该在 CSS 中使用媒体查询。

如果您试图为您的网站创建一定程度的响应能力，我想您可以(理论上)使用一些 Javascript，但这是真正的“hackish”并且不是高效的编码。除其他外，它可能会减慢您的网站速度。

我将在下面提供一个通用示例，但有两件非常重要的事情需要注意。他们是:

1) 在 HTML 文件的“head”部分，您应该放置以下代码:

<meta name="viewport" content="width=device-width, initial-scale=1"/>

2) 如果下面的代码提到“方向”，您应该输入“横向”或“纵向”，具体取决于您所指的手机方向。

它看起来像这样:

@media screen and(max-width: 660px)
              and(orientation: landscape) {
                  /* In this commented out area between the 2 curly brackets, you should put the css code of the elements you want to have resize */
}

希望对您有所帮助。