Javascript 根据设备更改方向使用jquery动态调整内容大小

我有两个按钮，我想在页面加载时动态缩放，以适应移动网站上的“我的标题”。这很直截了当

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。 问题是，当设备方向改变时，内容没有调整大小，大小保持与以前的大小相同。

---

这是因为该功能是在设备完成旋转之前运行的，如果是这样的话，是否有办法在方向更改完成时运行该功能来重新缩放按钮？

目前还不完全支持该功能，但未来的解决方案肯定是使用

窗口。方向
对象。例如：

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");
}

更多信息请参见（我举的例子）

要知道它是在前面调用还是在后面调用，只需在

setHeader（）；设置间隔（设置头，5000）

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

编辑：如果需要长时间加载，则问题的解决方案是延长间隔

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

将在1秒后触发，然后在2s、3s、4s、5s后大概…
不仅仅是jquery css html和phpuse
$（窗口）。在（“调整大小”，函数（）上）
orientationchange
事件只在jQuery Mobile中可用。我认为这不重要，但通过添加如下计时器，功能确实启动了。我正在使用jQuery-1.6.4.min.js btw***更新***尝试jQuery Mobile，结果是一样的。从jQuery手册：“调整大小处理程序中的代码不应依赖于调用处理程序的次数。根据具体实现，调整大小事件可以在调整大小的过程中连续发送（这是Internet Explorer和基于WebKit的浏览器（如Safari和Chrome）中的典型行为），或者在调整大小操作结束时仅发送一次。”（其他一些浏览器如Opera中的典型行为）。“to@Omar-jquery有一个缩写=.resize（），你们两个都检查了更多信息，肯定是在之后被解雇了，没有考虑设置时间延迟。我正在用我的android xperia手机进行测试，它不会太快，大约1秒可以超时，但是你认为有些设备可能需要更多的时间吗？请检查编辑-谢谢！）抱歉，我没有输入setTimeout应该是setInterval…无论如何…可能是一些旧三星，即使在android之前的时代，它们也很擅长提供好的javascript。很好，我使用了timeout，反正只触发了一次。非常适合我需要的功能