漿紗動態內容與設備的變化方向

的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。問題是，當設備方向改變時，內容沒有調整大小，尺寸與之前的尺寸保持不變。這是因爲該功能在設備旋轉完成之前正在運行，如果有，是否有方法可以在方向更改完成時運行該功能來重新縮放按鈕？

來源

2014-02-06 Paul Ledger

您使用JQM？ – Omar

不只是jQuery的CSS的HTML和PHP –

使用'$（窗口）。在（「調整」，函數（）''只orientationchange'事件的jQuery的手提。 – Omar

它也不是完全支持的，但未來的解決方案無疑將成爲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 .. 。aproximately ...

來源

2014-02-06 21:28:38

肯定被解僱後，沒想到設置了一個時間延遲。我正在測試我的android xperia手機的速度不是太快，大約1秒鐘會超時，但您認爲有些設備可能需要更多時間嗎？ –

請**檢查編輯** - 謝謝！ :)對不起，我錯過了鍵入的setTimeout應該是setInterval ...無論如何...也許一些舊的samsungs，這是非常好的提供良好的JavaScript甚至在android時代之前。 –

其罰款我用過超時，只反正一次。完美的功能，我需要 –

漿紗動態內容與設備的變化方向

回答

相關問題