覆蓋主體標籤後重置頁面佈局

當窗口高度落在特定尺寸（450px）以下時，我會自動創建頁面。覆蓋主體標籤後重置頁面佈局

問題是 - 一旦窗口高度超過特定尺寸（450px），我該如何保留內容。我試過.remove但它不起作用。

代碼：

$(window).resize(function() { 
    if ($(window).height() < 450) { 
     $('body').html("Please resize your screen."); 
    } 
    else { 
     $('body').remove(this); 
    } 
});

的jsfiddle：http://jsfiddle.net/zyL6fyvn/1/

來源

2014-11-08 methuselah

我不明白你，它甚至'試圖實現......'這個'應該參考什麼？ – myfunkyside 2014-11-08 11:38:10

請忽略它 - 我試圖恢復在調整大小事件 – methuselah 2014-11-08 11:39:58

之前最初在主體中的內容，這是一種非常奇怪的方法。還有其他方法可以做到這一點，例如使用'$（body）.hide（）/ .show（）'來顯示一個模式，一個提示框，等等。 – Timmerz 2014-11-08 12:49:33

最簡單的（我認爲唯一的），是存儲內容到一個變量後才能取出：

$(window).on('load',function() { 
    var body; 
    var bodyVisible = true; 

    function resize() { 
     if (bodyVisible==true && $(window).innerHeight()<450) { 
      bodyVisible = false; 
      body = $('body').html(); //store current body content before removing it 
      $('body').html("Please resize your screen."); 
     } else if (bodyVisible==false && $(window).innerHeight()>=450) { 
      bodyVisible = true; 
      $('body').html(body); //restore body content 
     } 
    } 
    resize(); //invoke resize() on page-load 
    $(window).resize(resize); //invoke resize() on page-resize 
});

小提琴：http://jsfiddle.net/zyL6fyvn/3/

請參閱上面代碼中的註釋以獲取解釋。
我把調整大小的代碼放入一個標準函數中，該函數在加載頁面時調用一次，然後在每個頁面調整大小。（否則，如果窗口的高度低於450，直到您調整了一次大小，內容仍將顯示。）
我添加了bodyVisible布爾值，否則正文內容會在每次調整大小時再次重寫。現在只有在高度超過閾值時纔會重寫一次。
我更喜歡用.innerHeight()而不僅僅是.height()，我得到了更加一致和可靠的結果。但那只是我的個人意見。
在您的HTML中，嘗試關閉您的<input />和<br />元素（斜槓之前的空格不是拼寫錯誤）。

（我從來沒有見過一個<br />與類順便說一句，或CSS被應用到它對於這個問題..但顯然它的工作原理，並officially valid :)

來源

2014-11-08 12:44:35 myfunkyside

覆蓋主體標籤後重置頁面佈局

回答

相關問題