Question

我用谷歌搜索并研究了如何做到这一点，但是没有设法让它发挥作用。我已经声明了一个名为width的变量。我希望我的JS检查，如果屏幕的宽度小于660px，那么宽度应为140px，否则应为100px。变量宽度只应在我旋转设备＆＃34; phone＆＃34;时才会改变，但它不起作用？我希望变量应该在我旋转设备时检查屏幕的宽度。

JS

var width = 0;
   function check()
   {

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


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

Answer 1

你想改变实际屏幕视图的大小是什么？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 */
}

我希望有所帮助。

Answer 2

您可以使用窗口调整大小事件：

Jquery：

    <MajorUpgrade Schedule="afterInstallInitialize"
              AllowDowngrades="yes"/>

平原：

$(window).resize(yourFunction);

或

window.onresize = function(){yourFunction};;

用JS改变手机旋转的变量

2 个答案: