javascript - 在设备改变方向时使用 jquery 动态调整内容大小

Question

我有两个按钮，我想在页面加载时动态缩放它们以适应移动网站上的标题。这非常简单。

var btn_h = $('#menu_btn').height();
    $('#menu_btn').width(btn_h+'px');
    $('#search_btn').width(btn_h+'px');

这里的问题是，当用户/我更改测试设备的方向时，缩放的内容仍然设置为先前方向的宽度/高度。

function setHeader(){
    var btn_h = $('#menu_btn').height();
    $('#menu_btn').width(btn_h+'px');
    $('#search_btn').width(btn_h+'px');
    alert('height:'+btn_h+'  width:' + $('#menu_btn').height());
}
$(document).ready(function(e) {
    setHeader();
    $(window).bind('orientationchange', function() {
        setHeader();
    });
});

我在那里留下了一点警报来提供帮助。当设备为纵向时，宽度和高度为 42px；当页面以横向刷新时，高度和宽度为 27px。 问题是，当设备方向更改时，内容的大小不会调整，大小仍与之前的大小相同。 这是因为该函数在设备完成旋转之前运行，如果是这样，是否有一种方法可以运行该函数以在方向更改完成时重新缩放按钮？

Answer 1

目前尚未完全支持，但 future 的解决方案肯定是使用 window.orientation 对象。示例:

var orientation = screen.mozOrientation;

if (orientation === "landscape-primary") {
  console.log("That looks good.");
} else if (orientation === "landscape-secondary") {
  console.log("Mmmh... the screen is upside down!");
} else if (orientation === "portrait-secondary") {
  console.log("Mmmh... you should rotate your device");
}

参见https://developer.mozilla.org/en-US/docs/Web/API/Screen.orientation (我以我的例子为例)了解更多信息。

To 是在之前还是之后调用，可以通过添加

简单地找出

setHeader(); setInterval(setHeader,5000);

在绑定(bind)内 - 它将每 5 秒显示一次警报以及实际值。 因此，只需关闭警报，直到页面旋转 - 然后检查实际值。

编辑:如果长时间负载是您的问题，解决方案是延长间隔

var timer = 1000; 
function rotCheck(){ 
   /*check*/ 
   timer=timer+1000;
   setTimeout(rotCheck,timer); 
};
rotCheck();

将在1秒后触发，然后在2s、3s、4s、5s...大约...