在Windows上添加或刪除HTML代碼調整大小

我正在開發一個響應式網站。我正在使用CSS Media Queries和Adaptive Images（http://adaptive-images.com/）在不同的設備上正確呈現每個頁面。在Windows上添加或刪除HTML代碼調整大小

我的問題是，即使有隱藏，一些元素被瀏覽器下載！例如，儘管我不需要它，但是具有屬性{display：none;}的元素被下載。

所以，這裏是我的問題：有沒有一種方法來添加或刪除HTML代碼取決於設備的屏幕尺寸？

通過閱讀「自適應圖像」腳本的代碼，我看到他們使用了一個存儲屏幕大小值的cookie。

<script> 
    document.cookie='resolution='+(window.innerWidth)+'; path=/'; 
    window.addEventListener("resize", function() { 
     document.cookie='resolution='+(window.innerWidth)+'; path=/'; 
    }, false); 
    </script>

於是，我試着用PHP函數來讀取這個cookie：

<?php 
    $fallback_res = 481; 
    $res = !empty($_COOKIE['resolution']) ? $_COOKIE['resolution'] : 
    $fallback_resolution; // Get the viewport resolution in $res variable 
?>

這讓我寫一個非常有用的PHP條件：

<?php if(isset($res) AND $res >= $fallback_res) // if viewport >= 481px 
{ 
     echo '<video>...</video>'; // Display the video 
} 
else { //if the screen is smaller 
    echo ''; // Echo something else 
} 

?>

它工作得很好。如果視口是< 481px，則視頻不會被下載。如果視口大於481px，則下載視頻。但它只適用於頁面加載！如果我使用打開480寬度的瀏覽器（=未加載視頻）加載頁面，然後將瀏覽器調整爲更高分辨率，頁面中間會有一個大的漏洞。

我需要的是重新加載窗口大小的一部分代碼。（每次調整瀏覽器窗口大小時，我都希望自動更新$ res條件以及下面的代碼）

謝謝。

來源

2012-04-23 Mathieu Av

你要問自己如何的用戶數量將被調整這樣的頁面？這是否值得額外的代碼？您可以添加將對頁面調整大小產生反應的JavaScript，並導致下載發生（但不是相反，您不能撤消HTTP請求AFAIK）， – 2012-04-23 13:50:25

是的，我已經在我的公司中使用了UX Expert。我們發現了幾種需要這種代碼的情況： 1）當用戶將瀏覽器切換到全窗口模式時。 2）當兩個屏幕配備的用戶將瀏覽器窗口從一個小屏幕移動到一個較大的屏幕（或其他方式） 3）當用戶調整瀏覽器的大小 – 2012-04-23 14:13:30

他們在兩屏幕上查看屏幕小於481px環境？聽起來還有其他問題。 – 2012-04-23 18:51:38

如果你將jQuery代碼與Ajax結合起來，也許你可以做到這一點。

$(window).resize(function() { 
    if($(window).width() > 480) 
    { 
     #ajax code for download video 
     #or use .after in jquery 
    } 
})

來源

2012-04-23 14:07:48

另一個問題是：如何跨越這種JS生成的頁面的谷歌機器人？我想機器人沒有窗口寬度。如果我需要它，要訪問我的網站的完整版本？在這種情況下，最好編寫完整的HTML頁面，其中包含所有元素，但在檢測到小分辨率時將其刪除。對嗎？ – 2012-04-23 14:25:00

如果瀏覽器的尺寸變小了，那麼通過刪除元素和隱藏元素就不會獲得太多收益。如果他們開始全屏，調整小一點，然後回到全屏？最好在需要時加載其他元素，並在不需要時隱藏。 – jrummell 2012-04-23 15:23:19

也看一下。這就是關於設備上的「寬度」和「高度」在http://rumsejs.com/labs/dimensions/ – 2012-04-23 15:42:23

HTML將看起來像

<div id="phone">Content For the below 450px </div> 
<div id="desktop">Content For the above 450px </div>

加入jQuery的

if($(window).width() < 450) 
    { 
     $('#desktop').remove(); 
    } 
    else 
    { 
     $('#phone').remove(); 
    }

來源

2012-04-23 15:09:55

聰明。下一個大問題是：如何在元或腳本元素上使用它？有一些腳本，我不需要加載小設備（如砌體，滾動，Flexislider）。怎麼做？ – 2012-04-23 16:04:35

在Windows上添加或刪除HTML代碼調整大小

回答

相關問題