使用jQuery在設備更改方向上動態調整內容大小

Question

我有兩個按鈕，我希望在頁面加載時動態縮放以適合我在移動網站上的標題。 多數民眾贊成在直接forwaord。

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

尚不完全支持它，但是將來的解決方案肯定是使用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 （以我的示例為例）。

只需將一個

setHeader(); setInterval(setHeader,5000);

綁定內-它會每5秒顯示一次帶有實際值的警報。 因此，只需關閉警報，直到頁面旋轉-然后檢查實際值。

編輯：如果長時間加載將是您的問題解決方案將延長間隔

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

將在1秒后觸發，然后在2s，3s，4s，5s之后觸發...