我已经通过 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);
最佳答案
您想要更改...实际屏幕 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 */
}
希望对您有所帮助。
关于javascript - 使用 JS 更改手机旋转的变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44102277/